<!

-- ################################ Orders ################################ -->

<div style="color: #354052">

<div class="customerUserSection">
<app-spinner></app-spinner>
<div class="row paddingLeftTableList" style="margin-top: 16px">
<div
class="col-12 tablelistInner pr-0 pb-0 pl-0"
style="height: calc(100vh - 210px)"
>
<div
style="
width: 100%;
position: sticky;
top: 0px;
background: white;
z-index: 1061;
min-width: 1580px;
"
class="row mb-0"
>
<!-- HEADER END -->
</div>
<div id="containerDiv">
<div class="col-12 applay_section">
<div class="row pl-0 mb-0 align-items-start">
<!-- <div class=" pt-2 text-end filter" style="margin-top:6px;" >
<select class="custom-select" style="width:36px;
height: 34px !important; border-radius: 0; border: 1px solid #CED0DA !important;
padding: 2px 0 2px 0; background-repeat: no-repeat;
background-position: 7px 7px;
background-size: 17px;
text-align: center;
padding-top: 2px;
background-image:url(assets/img/common/fi-rr-
filter.svg)">
<option selected value="all">All</option>
<option value="DELIVERED">Delivered</option>
<option value="INTRANSIT">Intransit</option>
<option value="FAILED">Failed</option>
</select>
</div> -->
<div class="row flex-nowrap">
<div
class="col-4 pt-3 mr-2 ml-0 text-start serachbar-box"
style="width: 22%; color: #354052"
>
<label
style="
color: #354052 !important;
font-family: poppins, sans-serif;
"
>
Search Orders</label
>
<input
class="form-control"
style="
 background-image: url('assets/img/common/search-icon.svg') !
important;
"
type="text"
placeholder="Search Orders.."
[value]="searchKey"
(input)="setSearchKey($event.target.value)"
/>
</div>
<div
class="pt-3 mr-2 ml-0"
style="margin-left: 17px !important"
>
<div class="dateSectionDiv">
<div>
<label
style="
color: #354052 !important;
font-family: poppins, sans-serif;
"
>
From Date
</label>
<div class="input-group" style="width: 160px">
<div
style="
background-image: url('assets/img/common/search-
icon.svg') !important;
"
class="rowSelect"
>
<input
class="form-control datepickerStyleInput"
style="cursor: pointer"
placeholder="- -"
name="fromDate"
readonly="true"
(click)="df.toggle()"
[(ngModel)]="modelFromDate"
ngbDatepicker
#df="ngbDatepicker"
firstDayOfWeek="7"
/>
</div>
<img
src="assets/img/common/fi-rr-calendar.svg"
style="
width: 15px;
position: absolute;
top: 10px;
left: 7px;
"
/>
</div>
</div>
<div style="margin-left: 20px">
<label
style="
color: #354052 !important;
 font-family: poppins, sans-serif;
"
>
To Date
</label>
<div class="input-group" style="width: 160px">
<div
style="
background-image: url('assets/img/common/search-
icon.svg') !important;
"
class="rowSelect"
>
<input
style="cursor: pointer"
class="form-control datepickerStyleInput"
placeholder="- -"
(click)="dt.toggle()"
name="toDate"
readonly="true"
[(ngModel)]="modelToDate"
ngbDatepicker
#dt="ngbDatepicker"
firstDayOfWeek="7"
/>
</div>
<img
src="assets/img/common/fi-rr-calendar.svg"
style="
width: 15px;
position: absolute;
top: 10px;
left: 7px;
"
/>
</div>
</div>
<div
style="margin-left: 17px"
class="text-center apply-btn-box"
>
<button
type="button"
style="padding: 0px 7px"
class="btn btn-outline-warning"
(click)="removeFilter()"
>
Reset
</button>
</div>
<div
style="margin-left: 17px"
class="text-center apply-btn-box"
>
<button
type="button"
style="padding: 0px 7px"
class="btn btn-outline-warning"
(click)="applyFilter()"
 >
Apply
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HEADER START -->
<div
style="
margin-top: 12px;
min-width: 1580px;
border-top: 1px solid #c4cdd5;
border-bottom: 1px solid #c4cdd5;
background-color: #f5f6fa;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 9px;
display: flex;
justify-content: space-between;
width: 100%;
"
class="orderhistory"
>
<div style="width: 120px">
<div
style="
width: 85px;
font-size: 14px;
font-weight: 500;
margin-right: 10px;
margin-left: 16px;
cursor: pointer;
"
(click)="sorting('orderId')"
>
Order&nbsp;No.
<img
[ngClass]="sortBy['orderId']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>

<div style="width: 90px">

<div
style="
width: 93px;
font-size: 14px;
font-weight: 500;
margin-right: 10px;
margin-left: 16px;
cursor: pointer;
"
(click)="sorting('orderId')"
>
 Probill&nbsp;No.
<img
[ngClass]="sortBy['orderId']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>

<div
style="
width: 140px;
padding-left: 5px;
padding-right: 55px;
font-size: 14px;
"
>
<div
(click)="sorting('carrierName')"
style="
width: 75px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
class="customer"
>
Partner<img
[ngClass]="sortBy['carrierName']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 210px; margin-right: 10px; font-size: 14px">
<div
(click)="sorting('customer')"
style="
width: 158px;
padding-left: 5px;
margin-left: 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
class="customer"
>
Customer on Order
<img
[ngClass]="sortBy['customer']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 90px; font-size: 14px; padding-left: 0px">
<div
(click)="sorting('orderSource')"
style="
 width: 158px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
margin-right: 30px;
padding-left: 0px;
margin-left: 0px;
"
>
Source
<img
[ngClass]="sortBy['orderSource']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 130px">
<div
(click)="sorting('pickupDate')"
style="
width: 109px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
>
Pick up Date
<img
[ngClass]="sortBy['pickupDate']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 60px; margin-right: 30px">
<div
(click)="sorting('shipper')"
style="
width: 72px;
font-size: 14px;
font-weight: 500;
margin-right: 20px;

cursor: pointer;
"
>
Shipper
<img
[ngClass]="sortBy['shipper']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 101px; margin-right: 20px">
<div
(click)="sorting('origin')"
style="
 width: 61px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
>
Origin
<img
[ngClass]="sortBy['origin']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 126px; margin-right: 30px">
<div
(click)="sorting('consignee')"
style="
width: 93px;
margin-left: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
>
Consignee
<img
[ngClass]="sortBy['consignee']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div
(click)="sorting('destination')"
style="width: 130px; margin-left: 13px; margin-right: 30px"
>
<div
style="
width: 102px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
"
>
Destination
<img
[ngClass]="sortBy['destination']"
style="height: 13px; width: 13px"
src="assets/img/down_arrow.svg"
/>
</div>
</div>
<div style="width: 150px">
<div style="width: 60px; font-size: 14px; font-weight: 500">
Price
</div>
</div>
<div style="width: 138px; padding-left: 11px">
 <div style="width: 70px; font-size: 14px; font-weight: 500">
Status
</div>
</div>
<div>
<div
style="
width: 53px;
font-size: 14px;
font-weight: 500;
margin-right: 14px;
"
>
Actions
</div>
</div>
</div>
<!-- BODY START -->
<div
*ngIf="isDataLoading != ''"
style="
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 363px);
font-size: 20px;
font-weight: 500;
"
>
{{ isDataLoading }}
</div>
<ng-container *ngIf="isDataLoading == ''">
<div
*ngFor="let customerList of orderList; let i = index"
style="
min-width: 1580px;
border-bottom: 1px solid #c4cdd5;
padding: 9px;
display: flex;
justify-content: space-between;
"
>
<div style="width: 200px; display: flex; align-items: center">
<!-- (click)="viewQuote(customerList['quoteDetails']
['quoteId'],customerList['customOrderId'],customerList['orderId'],customerList?.sta
tus,customerList['consigneeName'],customerList['quoteDetails']
['customerId'],customerList.quoteDetails.carrierName,customerList['quoteDetails'],c
ustomerList.quoteDetails.carrierLogo)" -->
<div
(click)="handleQuoteClick(customerList)"
style="
font-size: 14px;
margin-left: 10px;
word-break: break-all;
color: #2877c6;

cursor: pointer;
"
>
 {{
customerList.customOrderId
? customerList.customOrderId
: "--"
}}
</div>
</div>

<div
style="
width: 125px;
margin-right: 20px;
margin-left: 35px;
display: flex;
align-items: center;
"
>
<div
style="font-size: 14px; word-break: break-all; color: #354052"
>
{{ customerList.proBill ? customerList.proBill : "--" }}
</div>
</div>

<div
style="
width: 250px;
margin-left: 12px;
display: flex;
align-items: center;
padding-left: 0px;
"
>
<div style="padding: 0px; margin-right: 0px; margin-left: 0px">
<img
*ngIf="
customerList?.quoteDetails?.carrierName !== 'Multiple'
"
[src]="customerList?.partnerLogo || '--'"
style="
width: 36px !important;
height: 36px !important;
object-fit: cover;
border-radius: 8px;
"
alt=""
/>
</div>
<div
style="font-size: 14px; word-break: break-all; color: #333f52"
>
<div>
{{ customerList?.carrierName || "--" }}
</div>
</div>
</div>

<!-- <div style="width: 170px; display: flex; align-items: center;

margin-right:10px; ">
 <div style="font-size: 14px; word-break: break-all; color:
#354052;">gdfgdfgdfgf</div>
</div> -->
<div
style="
width: 310px;
margin-right: 10px;
margin-left: 10px;
display: flex;
align-items: center;
padding-right: 2px;
"
>
<div style="margin-right: 0px"></div>
<div
*ngIf="customerList.profileImg != 'N/A'"
style="
background-color: #c4cdd5;
padding: 3px;
border-radius: 50%;
margin-right: 7px;
"
>
<img
src="{{
customerList.profileImg
? customerList.profileImg
: '../../../../../assets/img/avatar.png'
}}"
style="border-radius: 50%; height: 32px; width: 32px"
alt=""
/>
</div>
<div
*ngIf="customerList.profileImg == 'N/A'"
style="
background-color: #c4cdd5;
padding: 3px;
border-radius: 50%;
margin-right: 7px;
"
>
<img
src="../../../../../assets/img/avatar.png"
style="border-radius: 50%; height: 32px; width: 32px"
alt=""
/>
</div>
<div
style="
font-size: 14px;
word-break: break-all;
color: #2877c6;
cursor: pointer;
"
>
<div
(click)="redirctToGeneralDetails(customerList.customerId)"
>
 {{
customerList.consigneeName
? customerList.consigneeName
: "--"
}}
</div>
<!-- <div style="color: #354052 !
important;">{{customerList.orderId ? customerList.orderId :'--'}}</div> -->
</div>
</div>
<div
style="
width: 50px;
display: flex;
align-items: center;
margin-left: 40px;
margin-right: 50px;
"
>
<div
style="
font-size: 14px;
word-break: break-all;
margin-right: 2px;

color: #354052;
white-space: nowrap;
"
>
<img alt="" />
<span>
{{ customerList.source ? customerList.source : "--" }}
</span>
</div>
<!-- *ngIf="orders.sourceLogo" style="height: 14px;width:12px;"
src="{{orders.sourceLogo}}" -->
</div>
<div
style="
width: 150px;
margin-left: 20px;
display: flex;
align-items: center;
"
>
<div
style="
font-size: 14px;
width: 78px;
word-break: break-all;

color: #354052;
white-space: nowrap;
margin-left: 5px;
"
>
{{ customerList.pickupDate ? customerList.pickupDate : "--" }}
</div>
</div>
<div
style="
width: 150px;
margin-left: 30px;
margin-right: 50px;
display: flex;
align-items: center;
"
>
<div
style="
font-size: 14px;
width: 10px;

color: #354052;
margin-left: 30px;
"
>
{{ customerList.shipper ? customerList.shipper : "--" }}
</div>
</div>
<div
style="
width: 147px;
display: flex;
margin-right: 5px;
margin-left: 0px;
align-items: center;
"
>
<div
style="
font-size: 14px;

color: #354052;
margin-left: 2px;
margin-right: 55px;
white-space: nowrap;
"
>
{{
customerList.shipper == "Multiple"
? "Multiple"
: customerList.origin
}}
</div>
</div>
<div
style="
width: 100px;
margin-right: 60px;
display: flex;
align-items: center;
"
>
<div
style="
font-size: 14px;
margin-left: 1px;
 padding-right: 5px;
color: #354052;
"
>
{{ customerList.consignee ? customerList.consignee : "--" }}
</div>
</div>
<div
style="
width: 150px;
display: flex;
align-items: center;

margin-right: 60px;
"
>
<div style="font-size: 14px; margin-left: 45px; color: #354052">
{{
customerList.consignee == "Multiple"
? "Multiple"
: customerList.destination
}}
</div>
</div>
<div
style="
width: 115px;
display: flex;
align-items: center;
position: relative;
white-space: nowrap;
margin-right: 22px;
margin-left: 15px;
"
>
<div
style="
font-size: 14px;
width: 60px;
margin-right: 50px;
word-break: break-all;
color: #354052;
"
*ngIf="customerList.quoteDetails.quoteType !== 'Multiple'"
>
$ {{ customerList.price }}
<small>{{ customerList.currency }} </small>
<img
src="assets/img/common/down_icon.svg"
style="cursor: pointer"
placement="bottom"
popoverClass="popover_shipment_quote_orders"
[ngbPopover]="popContentquote"
(click)="popOverIndex(i)"
/>
</div>
<div *ngIf="customerList.quoteDetails.quoteType == 'Multiple'">
Multiple
</div>
 <!-- <div><img style="margin-left: 7px;"
src="../../../../../assets/img/common/down_icon.svg" alt=""></div> -->
</div>
<!-- <div style="width: 90px; display: flex; align-items: center;">
<div style="font-size: 14px; word-break: break-all;
display: flex;">
<div style="padding-top: 5px ; font-weight: 500; color:
white;"
[class]="orders && orders?.status=='FAILED' ?
'badge badge-danger' : orders?.status=='DELIVERED' || orders?.status=='NEW'? 'badge
badge-success': orders?.status=='INTRANSIT' ? 'badge badge-warning' : 'badge badge-
primary'">
{{orders.status}}</div>
<span class="ml-2" *ngIf="orders.status=='Deliverd'">
<img src="assets/img/common/down_icon.svg"
style="cursor: pointer;" placement="bottom"

popoverClass="popover_shipment_status_orderlist" [ngbPopover]="popContentDelivered"
/>
</span>
<span class="ml-2" *ngIf="orders.status=='INTRANSIT'">
<img src="assets/img/common/down_icon.svg"
style="cursor: pointer;" placement="bottom"

popoverClass="popover_shipment_status_orderlist" [ngbPopover]="popContentIntransit"
/>
</span>
</div>
</div> -->
<div
style="
width: 125px;
display: flex;
align-items: center;
margin-right: 45px;
padding-left: 0px;
margin-left: 15px;
"
>
<div *ngIf="customerList.quoteDetails.quoteType == 'Multiple'">
Multiple
</div>
<div
style="
font-size: 14px;
margin-left: 30px;
word-break: break-all;
display: flex;
"
*ngIf="customerList.quoteDetails.quoteType !== 'Multiple'"
>
<div
style="padding-top: 5px; font-weight: 500; color: white"
[ngClass]="
customerList.status == 'FAILED'
? 'badge badge-danger'
: customerList.status == 'DELIVERED' ||
customerList.status == 'NEW'
? 'badge badge-success'
 : customerList.status == 'INTRANSIT'
? 'badge badge-warning'
: customerList.status == 'CANCELLED'
? 'badge badge-grey'
: 'badge badge-primary'
"
>
{{ customerList.status ? customerList.status : "--" }}
</div>
<span
class="ml-2 delivere"
*ngIf="customerList.status == 'DELIVERED'"
style="position: relative"
>
<img
src="assets/img/common/down_icon.svg"
style="cursor: pointer"
placement="bottom"
popoverClass="popover_shipment_status_orderlist"
[ngbPopover]="popContentDelivered"
(click)="
showPopupDeleivered(
customerList['quoteDetails']['quoteId'],
customerList['orderId'],
customerList?.status
)
"
/>
</span>
<span
class="ml-2"
*ngIf="customerList.status == 'INTRANSIT'"
style="position: relative"
>
<img
src="assets/img/common/down_icon.svg"
style="cursor: pointer"
placement="bottom"
popoverClass="popover_shipment_status_orderlist"
[ngbPopover]="popContentIntransit"
(click)="
showPopupInTransit(
customerList['quoteDetails']['quoteId']
)
"
/>
</span>
</div>
</div>
<div
class="action_td"
style="display: flex; align-items: center; padding-right: 25px"
>
<span *ngIf="customerList.quoteType !== 'Multiple'">
<img
src="assets/img/common/hor_3_dots.png"
class="dropdown-toggle"
data-toggle="dropdown"
style="margin-right: 0px"
 />
<!-- <div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple>
<a class="dropdown-item">
View Order
</a>
<a class="dropdown-item">
Save To Favorites
</a>

<a class="dropdown-item">
Copy Order
</a>
</div> -->

<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
multiple
>
<a
(click)="
orderView(
customerList['quoteDetails']['quoteId'],
customerList['customOrderId'],
customerList['orderId'],
customerList?.status,
customerList['consigneeName'],
customerList['quoteDetails']['customerId'],
customerList.quoteDetails.carrierName,
customerList['quoteDetails'],
customerList.quoteDetails.carrierLogo,
customerList.source
)
"
class="dropdown-item"
>
View Order
</a>
<a
class="dropdown-item"
(click)="open(content, 'add', customerList.orderId)"
>
Save To Favorites
</a>
<a
class="dropdown-item"
(click)="
shipAgain(
customerList['quoteDetails']['quoteId'],
customerList['source'],
customerList['orderId']
)
"
>
Copy Order
</a>
<a
class="dropdown-item"
 *ngIf="
customerList.status != 'INTRANSIT' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'DELIVERED' &&
customerList.status != 'FAILED'
"
(click)="changeStatusOfOrder('pickup', customerList, i)"
>
Pick UP
</a>
<a
class="dropdown-item"
(click)="cancelOrder(customerList, i)"
*ngIf="
customerList.status != 'FAILED' &&
(customerList.status === 'SCHED' ||
customerList.status === '!INTRANSIT')
"
>
Cancel Order
</a>

<a
class="dropdown-item"
*ngIf="
customerList.status != 'SCHED' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'DELIVERED' &&
customerList.status != 'FAILED'
"
(click)="changeStatusOfOrder('nopickup', customerList, i)"
>
Return to Scheduled
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'DELIVERED' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED' &&
customerList.status != 'SCHED'
"
(click)="changeStatusOfOrder('del', customerList, i)"
>
Delivered
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'INTRANSIT' &&
customerList?.status != 'DELIVERED' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED'
"
(click)="
getOrderMetaDataById(
customerList['quoteDetails']['quoteId'],
customerList['customOrderId'],
customerList['orderId'],
 customerList?.status,
customerList['consigneeName'],
customerList['quoteDetails']['customerId'],
customerList.quoteDetails.carrierName,
customerList['quoteDetails'],
customerList.quoteDetails.carrierLogo,
customerList.source
)
"
>
Edit Order
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'INTRANSIT' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED' &&
customerList.status != 'SCHED'
"
>
Carrier POD Request
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'INTRANSIT' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED' &&
customerList.status != 'SCHED'
"
(click)="changeStatusOfOrder('notDel', customerList, i)"
>
Return to In Transit
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'INTRANSIT' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED' &&
customerList.status != 'SCHED'
"
>
Upload POD
</a>
<a
class="dropdown-item"
*ngIf="
customerList?.status != 'INTRANSIT' &&
customerList.status != 'CANCELLED' &&
customerList.status != 'FAILED' &&
customerList.status != 'SCHED'
"
>
View POD
</a>
</div>
</span>
 </div>
</div>
</ng-container>

<div
*ngIf="isLoading"
style="display: flex; justify-content: center; padding: 10px"
>
Loading...
</div>
</div>

<!-- BODY END -->

</div>
</div>
</div>
</div>

<!-- for quote

***********************************************************************************
**************************************************** -->

<ng-template #popContentquote class="test" style="color: #354052">

<div class="popupHeaderStyle">
<div
style="
font-size: 18px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
padding-left: 15px;
"
>
Quote Summary
</div>
<!-- <button> -->
<img
style="cursor: pointer"
src="assets/img/common/fi-rr-cross-small.svg"
/>
<!-- </button> -->
</div>

<div class="row">
<div class="col-6">
<img
src="{{
popOverDataPrice.carrierLogo
? popOverDataPrice.carrierLogo
: 'assets/img/payment/Courier.svg'
}}"
width="60px"
class="m-1"
/>
</div>
<div class="col-6 text-right">
<div
style="
font-size: 14px;
 font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
{{ popOverDataPrice.shpmtModeName }}
<img
src="assets/img/common/shmt/{{
popOverDataPrice.shipmentModeStyleCode
}}.svg"
width="30px"
class="m-1"
/>
</div>
<div
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
padding-top: 8px;
"
>
Weight:
{{ popOverDataPrice && popOverDataPrice?.weight | number : "1.2-2" }}
Lbs
</div>
</div>
</div>
<div class="grey-devider"></div>
<div
class="row mb-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Quote No.</div>
<div style="color: #2196f3 !important" class="col-6 text-right">
{{ popOverDataPrice.customId }}
</div>
</div>
<div
class="row mb-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
*ngFor="let charge of popOverDataPrice.price_breakUp; let i = index"
>
<div class="col-6">
{{ charge[0] }}
</div>
<div class="col-6 text-right">$ {{ charge[1] }}</div>
</div>
 <div
class="row mb-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Discount</div>
<div class="col-6 text-right">
$ {{ popOverDataPrice.discount ? popOverDataPrice.discount : "00.00" }}
</div>
</div>
<div
class="row mb-0"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Shipcarte Insurance</div>
<div class="col-6 text-right">
$
{{
popOverDataPrice.scInsurance ? popOverDataPrice.scInsurance : "00.00"
}}
</div>
</div>
</ng-template>

<!--
***********************************************************************************
********************* -->

<!-- ################################ Add Fevrate

################################################## -->
<ng-template #content let-c="close" let-d="dismiss">
<form [formGroup]="addFevForm">
<div class="modal-header">
<h3
style="
font-weight: 500;
font-size: 18px;
padding: 10px 0px;
font-family: 'Poppins' !important;
"
>
Saving to Favorites
</h3>
<img
class="crossImageStyle"
style="margin-top: 10px"
(click)="d('Cross click')"
src="assets/img/common/fi-rr-cross-small.svg"
/>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="form-group p-0 m-0">
<label
class="control-label formLabel"
style="font: size 16px !important; color: #354052 !important"
for="addFev"
>Favorite order name</label
>
<div class="customerInput">
<input
id="addFev"
type="text"
class="form-control"
formControlName="addFev"
(input)="setValue($event.target.value)"
placeholder="Enter Favorite order name"
/>

<div
*ngIf="
addFevForm.controls['addFev'].invalid &&
(addFevForm.controls['addFev'].dirty ||
addFevForm.controls['addFev'].touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important; font-size: 11px"
*ngIf="addFevForm.controls['addFev'].errors.required"
>
Field is required.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="modal-footer"
style="margin-left: 47%; display: flex !important; justify-content: end"
>
<button
type="button"
style="
color: black;
width: 50px;
margin-right: 22px;
font-size: 14px !important;
"
class="btn btn-cancel cancleBtn"
(click)="d('Cancel click')"
>
Cancel
</button>
 <button
type="button"
style="
padding: 0px 7px;
width: 86px;
height: 36px;
background-color: #ff9a00;
color: white;
"
(click)="c('Save click')"
class="btn btn-color"
>
Add
</button>
</div>
</form>
</ng-template>

<!-- ############################### confirm fev

################################## -->
<ng-template #confirmWarn let-modal>
<div>
<div class="row" style="margin-top: 30px">
<div class="col-12 text-center">
<img
style="padding-top: 10px; height: 70px"
src="assets/img/Warning.svg"
alt=""
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center">
<p
class="mb-0"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
"
>
Confirm you want to save it to your favorites?
</p>
</div>
</div>
<div class="row mt-5 ml-0 mr-0">
<div
class="modal-footer"
style="margin-left: 50%; display: flex !important; justify-content: end"
>
<button
type="button"
style="color: black; border: none; width: 50px; margin-right: 14px"
class="saveToFavCancelButton"
(click)="modal.dismiss('Cancel click')"
>
Cancel
 </button>
<button
type="button"
style="
padding: 0px 7px;
width: 86px;
height: 36px;
background-color: #ff9a00;
color: white;
margin-left: 10px;
"
(click)="modal.close('Save click')"
class="btn btn-color"
>
Add
</button>
</div>
</div>
</div>
</ng-template>
<!-- for delivered
***********************************************************************************
********************************************** -->

<ng-template class="widthmore" #popContentDelivered style="color: #354052">

<div class="popupHeaderStyle">
<div
style="
font-size: 18px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
Status on Delivery
</div>
<!-- <button> -->
<img
style="cursor: pointer"
src="assets/img/common/fi-rr-cross-small.svg"
/>
<!-- </button> -->
</div>
<br />
<div class="badge badge-pill badge-success">DELIVERED</div>
<!-- <p class="d-inline blue-text pl-2"><a
style="text-decoration: none; cursor: pointer; font-size: 14px; color:
#1991EB;"
[ngStyle]="{'pointer-events':showViewPodBtn?'':'none',
'filter':showViewPodBtn?'grayscale(0%)':'grayscale(100%)'}"
(click)="open_modal_invoice('viewinvoice', true)">View POD</a> </p> -->
<div
class="row mb-2 mt-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
 >
<div class="col-6">Received By</div>
<div class="col-6 text-right">
{{ trackingData?.receivedBy ? trackingData?.receivedBy : "--" }}
</div>
</div>
<div class="grey-devider"></div>
<div
class="row mb-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Date</div>
<div class="col-6 text-right">
{{ trackingData?.receivedDate ? trackingData?.receivedDate : "--/--/--" }}
</div>
</div>
<div class="grey-devider"></div>
<div
class="row mb-2"
style="
font-size: 14px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Time</div>
<div class="col-6 text-right">
{{ trackingData?.receivedTime ? trackingData?.receivedTime : "--/--/--" }}
</div>
</div>
</ng-template>

<!--
***********************************************************************************
**************************************************** -->
<!-- ############################### Intransit
############################################## -->
<ng-template #popContentIntransit style="color: #354052">
<div class="popupHeaderStyle">
<div
style="
font-size: 18px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
Status on Delivery
</div>
<!-- <button> -->
<img
style="cursor: pointer"
src="assets/img/common/fi-rr-cross-small.svg"
 />
<!-- </button> -->
</div>
<br />
<div class="badge badge-pill badge-warning">In-TRANSIT</div>

<div
class="mb-2 mt-3 row"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Original Delivery Date</div>
<div class="col-6 text-right">
{{
trackingData["originalDeliveryDate"] === "--"
? "--"
: trackingData["originalDeliveryDate"] === "NA"
? "--"
: (trackingData["originalDeliveryDate"] | date : "MM-dd-yyyy")
}}
</div>
</div>
<div class="grey-devider"></div>
<div class="mb-2 mt-2 row">
<div class="history-tl-container">
<ul class="tl">
<li class="tl-item">
<div class="item-title">
<span
style="
font-size: 16px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
class="text-dark"
>{{ shipperZip }}</span
>
<p class="d-inline h5 fontChange">Origin Zip</p>
</div>
</li>
<li class="tl-item">
<div class="item-title">
<span
style="
font-size: 16px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
class="text-dark"
>{{ consigneeZip }}</span
>
<p class="d-inline h5 fontChange">Destination Zip</p>
</div>
 </li>
</ul>
<div class="mb-2 row">
<div class="col-7">
<div
style="
font-size: 16px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
Current Location
</div>
<div class="grey-text currentLocation">
{{
trackingData["currentLocation"]
? trackingData["currentLocation"]
: "--"
}}
</div>
</div>
<!-- <div class="col-5 blue-text"><a style="text-decoration: none; cursor:
pointer; font-size: 14px">&#43; View
Details</a> </div> -->
</div>
</div>
</div>
<div class="grey-devider"></div>
<div
class="mb-2 row mt-2"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins, sans-serif;
color: #354052;
"
>
<div class="col-6">Expected Delivery Date</div>
<div class="col-6 text-right">
{{
trackingData["estimatedDeliveryDate"] === "--"
? "--"
: trackingData["estimatedDeliveryDate"] === "NA"
? "--"
: (trackingData["estimatedDeliveryDate"] | date : "MM-dd-yyyy")
}}
</div>
</div>
</ng-template>
...................
genera:
import { Component, OnInit, OnDestroy, ViewChild } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import {
FormGroup,
FormControl,
FormBuilder,
Validators,
 AbstractControl,
FormArray,
} from "@angular/forms";
import { DomSanitizer } from "@angular/platform-browser";
import { NgbModalConfig, NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ServerURLS } from "../../../../../environments/environment";
import { ScHttpService } from "../../../../services/http/sc-http.service";
import { CustomValidators } from "../../../custom-validators";
import { BehaviorSubject, forkJoin, Subject } from "rxjs";
import { ScCommonService } from "../../../../services/common/sc-common.service";
import { ToastrService } from "ngx-toastr";
import { ThrowStmt } from "@angular/compiler";
import { runInThisContext } from "vm";
import { ListDataServiceService } from "src/app/services/list-data-
service.service";
import { LoadingService } from "src/app/services/loader.service";

@Component({
selector: "app-general-detail",
templateUrl: "./general-detail.component.html",
styleUrls: ["./general-detail.component.scss"],
})
export class GeneralDetailComponent implements OnInit, OnDestroy {
@ViewChild("loadContent", undefined) loadContent;
@ViewChild("contentWarn", undefined) confirmModal;
customerStatus: any = "";

displayData: boolean;
customerForm: FormGroup;
contactForm: FormGroup;
paymentForm: FormGroup;
accAndPickupDeliveryForm: FormGroup;
shipperForm: FormGroup;
consigneeForm: FormGroup;
orderEntryForm: FormGroup;
submitClicked: boolean = false;
contactInfromationList: any = [];
uploadImageShow: any = "";
imageData: any = null;
dataFromGoogleApiLocation: any;
contactSortBy: any;
isDesc: boolean;
showErrorGoogleMap: boolean = false;
submitClickedContact: boolean = false;
submitClickedInBusinessType: boolean = false;
serviceSelectionError: boolean = false;
businessSelectionError: boolean = false;
billingLocationList: any = [];
billingSortBy: any;
billingDataFromGoogleApiLocation: any;
shipperDataFromGoogleApiLocation: any;
consigneeDataFromGoogleApiLocation: any;
submitClickedBilling: boolean = false;
showErrorGoogleMapPayment: boolean = false;
showErrorGoogleMapShipper: boolean = false;
showErrorGoogleMapConsignee: boolean = false;
selectedAttributes: any;
loadData: any = [];
accessorialTypesFetchedAll: any = [];
selectedAccessorial: any = [];
selectedServices: any = [];
selectedPackages: any = [];
isManualLookUp: boolean = false;
serviceType: any = [];
packageType: any = [];
servicePackageTypeFetched: any = [];
stateArray: any = [];
stateArrayPayment: any = [];
stateArrayShipper: any = [];
stateArrayConsignee: any = [];
isManualLookUpPay: boolean = false;
isManualLookUpShipper: boolean = false;
isManualLookUpConsignee: boolean = false;
shipperAddressBookData: any = [];
consigneeAddressBookData: any = [];
shipperSerachText: string = "Select one";
consigneeSearchText: string = "Select one";
forforShipperCopy: FormGroup;
forforConsigneeCopy: FormGroup;

validationMessages = {
customerName: {
required: "Customer name is required*",
maxlength: "Customer name limit exceded*",
},
addressLine1: {
required: "AddressLine1 is required*",
maxlength: "AddressLine1 limit exceded*",
},
addressLine2: {
maxlength: "AddressLine2 limit exceded*",
},
email: {
required: "Email is required*",
// 'email': 'Invalid email*',
pattern: "Invalid email*",
maxlength: "Email limit exceded*",
},
status: {
required: "Status is required*",
},
state: {
required: "State is required*",
},
country: {
required: "Country is required*",
},
city: {
required: "City is required*",
maxlength: "City limit exceded*",
},
postalCode: {
required: "Postal code is required*",
maxlength: "Postal code limit exceded*",
},
mobileNo: {
pattern: "Invalid mobile no*",
minlength: "Invalid mobile no*",
 maxlength: "Invalid mobile no*",
},
phoneNo: {
required: "Phone number is required*",
pattern: "Invalid phone no*",
minlength: "Invalid mobile no*",
maxlength: "Invalid mobile no*",
},
website: {
maxlength: "Website character limit exceded*",
},
contactName: {
required: "Contact name is required",
maxlength: "Contact Name character limit exceded*",
},
position: {
maxlength: "Position character limit exceded*",
},
phoneExt: {
maxlength: "Phone Ext limit exceded*",
pattern: "Invalid ext*",
},
mobileExt: {
maxlength: "Mobile Ext limit exceded*",
pattern: "Invalid ext*",
},
};

validationMessagesContact = {
fnameContact: {
required: "First name is required*",
maxlength: "First name limit exceded*",
pattern:
"Invalid first name (don't use space, number or any other special
character) * ",
},
lnameContact: {
required: "Last name is required*",
maxlength: "Last name limit exceded*",
pattern:
"Invalid first name (don't use space, number or any other special
character) * ",
},
titleContact: {
required: "Title is required*",
maxlength: "Title limit exceded*",
},
emailContact: {
required: "Email is required*",
email: "Invalid Email*",
maxlength: "Email limit exceded*",
},
phoneNoContact: {
required: "Phone number is required*",
pattern: "Invalid phone no*",
minlength: "Invalid phone no*",
maxlength: "Invalid phone no*",
},
phoneExtContact: {
 maxlength: "Phone Ext limit exceded*",
pattern: "Invalid ext*",
},
mobileNoContact: {
pattern: "Invalid mobile no*",
minlength: "Invalid mobile no*",
maxlength: "Invalid mobile no*",
},
};

validationMessagesBilling = {
nameBilling: {
required: "Name is required*",
maxlength: "Name limit exceded*",
},
titleBilling: {
maxlength: "Title limit exceded*",
},
contactNameBilling: {
required: "First name is required*",
maxlength: "First name limit exceded*",
pattern:
"Invalid first name (don't use space, number or any other special
character) * ",
},
contactLastNamebilling: {
required: "Last name is required*",
maxlength: "Last name limit exceded*",
pattern:
"Invalid last name (don't use space, number or any other special character)
* ",
},
addressLine1Billing: {
required: "AddressLine1 is required*",
maxlength: "AddressLine1 limit exceded*",
},
addressLine2Billing: {
maxlength: "AddressLine2 limit exceded*",
},
countryBilling: {
required: "Country is required*",
},
stateBilling: {
required: "State is required*",
},
cityBilling: {
required: "City is required*",
maxlength: "City limit exceded*",
},
postalCodeBilling: {
required: "Postal code is required*",
maxlength: "Postal code limit exceded*",
},
emailBilling: {
required: "Email is required*",
email: "Invalid email*",
},
// 'statusBilling': {
// 'required': 'Status is required*'
 // },
phoneNoBilling: {
required: "Phone number is required*",
pattern: "Invalid phone no*",
minlength: "Invalid mobile no*",
maxlength: "Invalid mobile no*",
},
attentionBilling: {
maxlength: "Attention limit exceded*",
},
phoneExtBilling: {
maxlength: "Phone Ext limit exceded*",
pattern: "Invalid ext*",
},
faxNoBilling: {
maxlength: "Fax no limit exceded*",
pattern: "Invalid fax*",
},
faxPrefixBilling: {
maxlength: "Fax prefix limit exceded*",
pattern: "Invalid prefix*",
},
};

validationMessagesShipper = {
shipperName: {
maxlength: "Shipper name limit exceded*",
required: "Shipper Name is required",
},
addressLine1Shipper: {
maxlength: "AddressLine1 limit exceded*",
},
addressLine2Shipper: {
maxlength: "AddressLine2 limit exceded*",
},
countryShipper: {},
firstName: {
required: "First Name is required*",
},
stateShipper: {},
cityShipper: {
maxlength: "City limit exceded*",
},
postalCodeShipper: {
maxlength: "Postal code limit exceded*",
},
emailShipper: {
required: "Email is required*",
email: "Invalid email*",
},
phoneNoShipper: {
pattern: "Invalid phone no*",
minlength: "Invalid mobile no*",
maxlength: "Invalid mobile no*",
},
phoneExtShipper: {
maxlength: "Phone Ext limit exceded*",
pattern: "Invalid ext*",
},
};

validationMessagesConsignee = {
consigneeName: {
required: "Consignee Name is required",
maxlength: "Consignee name limit exceded*",
},
addressLine1Consignee: {
maxlength: "AddressLine1 limit exceded*",
},
addressLine2Consignee: {
maxlength: "AddressLine2 limit exceded*",
},
countryConsignee: {},
stateConsignee: {},
firstName: {
required: "First Name is required",
},
cityConsignee: {
maxlength: "City limit exceded*",
},
postalCodeConsignee: {
maxlength: "Postal code limit exceded*",
},
emailConsignee: {
required: "Email is required",
email: "Invalid email*",
},
phoneNoConsignee: {
pattern: "Invalid phone no*",
minlength: "Invalid mobile no*",
maxlength: "Invalid mobile no*",
},
phoneExtConsignee: {
maxlength: "Phone Ext limit exceded*",
pattern: "Invalid ext*",
},
};

formErrors = {
customerName: "",
addressLine1: "",
addressLine2: "",
email: "",
status: "",
mobileNo: "",
phoneNo: "",
website: "",
contactName: "",
position: "",
state: "",
country: "",
city: "",
postalCode: "",
phoneExt: "",
mobileExt: "",
};
formErrorsContact = {
fnameContact: "",
 lnameContact: "",
titleContact: "",
emailContact: "",
phoneExtContact: "",
};

formErrorsBilling = {
nameBilling: "",
titleBilling: "",
contactNameBilling: "",
contactLastNamebilling: "",
addressLine1Billing: "",
addressLine2Billing: "",
countryBilling: "",
stateBilling: "",
cityBilling: "",
postalCodeBilling: "",
emailBilling: "",
statusBilling: "",
phoneNoBilling: "",
attentionBilling: "",
phoneExtBilling: "",
faxNoBilling: "",
faxPrefixBilling: "",
};
formErrorsShipper = {
shipperName: "",
firstName: "",
lastName: "",
addressLine1Shipper: "",
addressLine2Shipper: "",
countryShipper: "",
stateShipper: "",
cityShipper: "",
postalCodeShipper: "",
emailShipper: "",
phoneNoShipper: "",
phoneExtShipper: "",
};

formErrorsConsignee = {
consigneeName: "",
firstName: "",
lastName: "",
addressLine1Consignee: "",
addressLine2Consignee: "",
countryConsignee: "",
stateConsignee: "",
cityConsignee: "",
postalCodeConsignee: "",
emailConsignee: "",
phoneNoConsignee: "",
phoneExtConsignee: "",
};

countryData = {
success: [
{
countryPhCode: "+1",
 countryName: "Canada",
countryCode: "CA",
provinceState: [
{
code: "AB",
name: "Alberta",
},
{
code: "BC",
name: "British Columbia",
},
{
code: "MB",
name: "Manitoba",
},
{
code: "NB",
name: "New Brunswick",
},
{
code: "NL",
name: "Newfoundland and Labrador",
},
{
code: "NT",
name: "Northwest Territories",
},
{
code: "NS",
name: "Nova Scotia",
},
{
code: "NU",
name: "Nunavut",
},
{
code: "ON",
name: "Ontario",
},
{
code: "PE",
name: "Prince Edward Island",
},
{
code: "QC",
name: "Quebec",
},
{
code: "SK",
name: "Saskatchewan",
},
{
code: "YT",
name: "Yukon",
},
],
},
{
countryPhCode: "+1",
countryName: "United States",
countryCode: "US",
provinceState: [
{
code: "AL",
name: "Alabama",
},
{
code: "AK",
name: "Alaska",
},
{
code: "AS",
name: "American Samoa",
},
{
code: "AZ",
name: "Arizona",
},
{
code: "AR",
name: "Arkansas",
},
{
code: "CA",
name: "California",
},
{
code: "CO",
name: "Colorado",
},
{
code: "CT",
name: "Connecticut",
},
{
code: "DE",
name: "Delaware",
},
{
code: "DC",
name: "District of Columbia",
},
{
code: "FL",
name: "Florida",
},
{
code: "GA",
name: "Georgia",
},
{
code: "GU",
name: "Guam",
},
{
code: "HI",
name: "Hawaii",
},
{
code: "ID",
name: "Idaho",
},
{
code: "IL",
name: "Illinois",
},
{
code: "IN",
name: "Indiana",
},
{
code: "IA",
name: "Iowa",
},
{
code: "KS",
name: "Kansas",
},
{
code: "KY",
name: "Kentucky",
},
{
code: "LA",
name: "Louisiana",
},
{
code: "ME",
name: "Maine",
},
{
code: "MD",
name: "Maryland",
},
{
code: "MA",
name: "Massachusetts",
},
{
code: "MI",
name: "Michigan",
},
{
code: "MN",
name: "Minnesota",
},
{
code: "MS",
name: "Mississippi",
},
{
code: "MO",
name: "Missouri",
},
{
code: "MT",
name: "Montana",
},
{
code: "NE",
name: "Nebraska",
},
{
code: "NV",
name: "Nevada",
},
{
code: "NH",
name: "New Hampshire",
},
{
code: "NJ",
name: "New Jersey",
},
{
code: "NM",
name: "New Mexico",
},
{
code: "NY",
name: "New York",
},
{
code: "NC",
name: "North Carolina",
},
{
code: "ND",
name: "North Dakota",
},
{
code: "OH",
name: "Ohio",
},
{
code: "OK",
name: "Oklahoma",
},
{
code: "OR",
name: "Oregon",
},
{
code: "PA",
name: "Pennsylvania",
},
{
code: "PR",
name: "Puerto Rico",
},
{
code: "RI",
name: "Rhode Island",
},
{
code: "SC",
 name: "South Carolina",
},
{
code: "SD",
name: "South Dakota",
},
{
code: "TN",
name: "Tennessee",
},
{
code: "TX",
name: "Texas",
},
{
code: "VI",
name: "U.S. Virgin Islands",
},
{
code: "UT",
name: "Utah",
},
{
code: "VT",
name: "Vermont",
},
{
code: "VA",
name: "Virginia",
},
{
code: "WA",
name: "Washington",
},
{
code: "WV",
name: "West Virginia",
},
{
code: "WI",
name: "Wisconsin",
},
{
code: "WY",
name: "Wyoming",
},
],
},
],
};
customerId: string;
isEdit: boolean = false;
customerData: any;
isContactEdit: boolean = false;
sharedData: any;
fetchedGmapId: string;
isremoveShipper: boolean = false;
shipperDrpdwn: any;
dropdownForShipper: any;
customerDetailsBoolean: boolean = false;
shipperFormDump: any;
isremoveConsignee: boolean = false;
addrTypeShipper: string;
addrTypeConsignee: any;
consigneeDrpdwn: any = [];
dropdownForConsignee: any;
shipperFromDDselected: boolean = false;
consigneeFromDDselected: boolean = false;
selectedFromDrpDwnshipper: any;

constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private fb: FormBuilder,
private domSanitizer: DomSanitizer,
config: NgbModalConfig,
private modalService: NgbModal,
private scHttpService: ScHttpService,
private commenService: ScCommonService,
private toastr: ToastrService,
private listDataService: ListDataServiceService,
private _loaderService: LoadingService
) {
this.commenService.currentData.subscribe((data: any) => {
this.sharedData = data;
});
config.backdrop = "static";
config.keyboard = false;
}

ngDoCheck() {
let shipperCompanyName = this.shipperForm.get("shipperName").value;
let shipperFistName = this.shipperForm.get("firstName").value;
let shipperLastName = this.shipperForm.get("lastName").value;
let shipperPhoneCode = this.shipperForm.get("phoneNoCode").value;
let shipperPhoneNumber = this.shipperForm.get("phoneNoShipper").value;
let shipperPhoneExt = this.shipperForm.get("phoneExtShipper").value;
let shipperEmail = this.shipperForm.get("emailShipper").value;

if (
(shipperFistName != "" ||
shipperEmail != "" ||
shipperLastName != "" ||
shipperPhoneCode != "" ||
shipperPhoneNumber != "" ||
shipperPhoneExt != "") &&
shipperCompanyName === ""
) {
this.shipperForm.get("emailShipper").setValidators([Validators.email]);
this.shipperForm
.get("shipperName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);
this.shipperForm
.get("firstName")
.setValidators([
 Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);

this.shipperForm.get("emailShipper").updateValueAndValidity();
this.shipperForm.get("shipperName").updateValueAndValidity();
this.shipperForm.get("firstName").updateValueAndValidity();

this.shipperForm.get("emailShipper").markAsTouched();
this.shipperForm.get("shipperName").markAsTouched();
this.shipperForm.get("firstName").markAsTouched();
this.logValidationErrorsShipper();
} else {
this.shipperForm.get("emailShipper").clearValidators();
this.shipperForm.get("shipperName").clearValidators();
this.shipperForm.get("firstName").clearValidators();

this.shipperForm.get("emailShipper").setValidators([, Validators.email]);
this.shipperForm
.get("shipperName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);
this.shipperForm
.get("firstName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);

this.shipperForm.get("emailShipper").updateValueAndValidity();
this.shipperForm.get("shipperName").updateValueAndValidity();
this.shipperForm.get("firstName").updateValueAndValidity();
}

let consigneeCompanyName = this.consigneeForm.get("consigneeName").value;

let consigneeFirstName = this.consigneeForm.get("firstName").value;
let consigneelastName = this.consigneeForm.get("lastName").value;
let consigneePhoneCode = this.consigneeForm.get("phoneNoCode").value;
let consigneePhoneNumber = this.consigneeForm.get("phoneNoConsignee").value;
let consigneePhoneExt = this.consigneeForm.get("phoneExtConsignee").value;
let consigneeEmail = this.consigneeForm.get("emailConsignee").value;

if (
(consigneeFirstName != "" ||
consigneelastName != "" ||
consigneePhoneCode != "" ||
consigneePhoneNumber != "" ||
consigneePhoneExt != "" ||
consigneeEmail != "") &&
consigneeCompanyName === ""
) {
this.consigneeForm
.get("emailConsignee")
.setValidators([Validators.email]);
this.consigneeForm
.get("consigneeName")
.setValidators([
 Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);
this.consigneeForm
.get("firstName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);

this.consigneeForm.get("emailConsignee").updateValueAndValidity();
this.consigneeForm.get("consigneeName").updateValueAndValidity();
this.consigneeForm.get("firstName").updateValueAndValidity();

this.consigneeForm.get("emailConsignee").markAsTouched();
this.consigneeForm.get("consigneeName").markAsTouched();
this.consigneeForm.get("firstName").markAsTouched();
this.logValidationErrorsConsignee();
} else {
this.consigneeForm.get("emailConsignee").clearValidators();
this.consigneeForm.get("consigneeName").clearValidators();
this.consigneeForm.get("firstName").clearValidators();

this.consigneeForm
.get("emailConsignee")
.setValidators([, Validators.email]);
this.consigneeForm
.get("consigneeName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);
this.consigneeForm
.get("firstName")
.setValidators([
Validators.maxLength(50),
CustomValidators.onlySpaceCheckValidator,
]);

this.consigneeForm.get("emailConsignee").updateValueAndValidity();
this.consigneeForm.get("consigneeName").updateValueAndValidity();
this.consigneeForm.get("firstName").updateValueAndValidity();
}
}

ngOnInit(): void {
this.forforShipperCopy = this.fb.group({
shipperName: [""],
firstName: [""],
lastName: "",
addressLine1Shipper: "",
addressLine2Shipper: "",
cityShipper: "",
stateShipper: "",
postalCodeShipper: "",
countryShipper: "",
emailShipper: "",
phoneNoCode: "",
phoneNoShipper: "",
 phoneExtShipper: "",
});
this.forforConsigneeCopy = this.fb.group({
consigneeName: [""],
firstName: [""],
lastName: "",
addressLine1Consignee: "",
addressLine2Consignee: "",
cityConsignee: "",
stateConsignee: "",
postalCodeConsignee: "",
countryConsignee: "",
emailConsignee: "",
phoneNoCode: "",
phoneNoConsignee: "",
phoneExtConsignee: "",
});
this.displayData = true;
this._loaderService.stringSubject.next(true);
this.customerId = this.commenService.customerId;
this.customerId = sessionStorage.getItem("_admincustomerId");
this.commenService.getShipperConsigneeDetails("SHPR").subscribe((res) => {
this.shipperDrpdwn = res;
});
this.commenService.getShipperConsigneeDetails("CNSE").subscribe((res) => {
this.consigneeDrpdwn = res;
});
this.initialiseDefaultForms();

// section for default api calls

********************************************************************************

let urlForLoadCustomer = ServerURLS.getCreateCustomerForm.action;

let urlForServicePackageType =
ServerURLS.getAllServiceMapPackageType.action;
let url =
ServerURLS.getAddressBookData.action +
"/" +
0 +
"/" +
20 +
"?searchKey=" +
"&uniqueCompany=" +
true;
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
let promise1 = this.scHttpService.getHttpService(urlForLoadCustomer, "");
let promise2 = this.scHttpService.getHttpService(
urlForServicePackageType,
""
);
let promiseForAdd = this.scHttpService.getHttpService(url, "");
forkJoin([
promise1, //observable 1
promise2,
promiseForAdd, //observable 2
]).subscribe(
([response1, response2, response3]: any) => {
this.displayData = false;
 this._loaderService.stringSubject.next(false);
this.loadData = response1;
this.servicePackageTypeFetched = response2;
this.shipperAddressBookData = response3.response;
this.consigneeAddressBookData = response3.response;
let arr = [];
this.servicePackageTypeFetched.map((data) => {
let obj = {
services_id: data.shippingModeId,
services: data.shippingMode,
shipmentCode: data.shipmentCode,
};
arr.push(obj);
});
this.serviceType = arr;
if (this.customerId) {
this.isEdit = true;
this.modalService.dismissAll();
this.fetchCustomerDetailsData();
} else {
this.customerForm.patchValue({
status: "active",
});
this.modalService.dismissAll();
}
},
(error) => {
this.toastr.error(
`${error.message ? error.message : "Something went wrong"}`,
"",
{
timeOut: 3000,
}
);
this.modalService.dismissAll();
}
);

// end section for default api calls

********************************************************************************

// section for dynamic login error function calls

********************************************************************************

this.customerForm.valueChanges.subscribe((value: any) => {

this.logValidationErrors(this.customerForm);
});
this.contactForm.valueChanges.subscribe((value: any) => {
this.logValidationErrorsContact(this.contactForm);
});

this.paymentForm.valueChanges.subscribe((value: any) => {

this.logValidationErrorsBilling(this.paymentForm);
// this.checkDataIsAlreadyPresentOrNot()
});

this.shipperForm.valueChanges.subscribe((value: any) => {

this.logValidationErrorsShipper(this.shipperForm);
});
 this.consigneeForm.valueChanges.subscribe((value: any) => {
this.logValidationErrorsConsignee(this.consigneeForm);
});

// End section for dynamic login error function calls

********************************************************************************

// code to set same country code

***********************************************************************************
*****

this.contactForm.get("countryCode").valueChanges.subscribe((value: any) => {

if (value !== this.contactForm.get("countryCodeM").value) {
this.contactForm.patchValue({ countryCodeM: value });
}
});
this.contactForm
.get("countryCodeM")
.valueChanges.subscribe((value: any) => {
if (value !== this.contactForm.get("countryCode").value) {
this.contactForm.patchValue({ countryCode: value });
}
});

//
***********************************************************************************
*****

// section for value changes country feilds

********************************************************************************

this.customerForm.get("country").valueChanges.subscribe((value: any) => {

if (value) {
this.customerForm.get("phoneNoCode").patchValue(value);
this.customerForm.get("mobileNoCode").patchValue(value);
let objStateArray = this.countryData.success.filter(
(data) => data.countryCode == value
);
if (objStateArray.length > 0) {
this.stateArray =
objStateArray.length > 0 && objStateArray[0].provinceState
? objStateArray[0].provinceState
: [];
} else {
this.stateArray = [];
}
} else {
this.customerForm.get("mobileNoCode").patchValue("");
this.customerForm.get("phoneNoCode").patchValue("");
this.stateArray = [];
}
});

this.paymentForm
.get("countryBilling")
.valueChanges.subscribe((value: any) => {
if (value) {
this.paymentForm.get("phoneNoCode").patchValue(value);
let objStateArray = this.countryData.success.filter(
 (data) => data.countryCode == value
);
if (objStateArray.length > 0) {
this.stateArrayPayment =
objStateArray.length > 0 && objStateArray[0].provinceState
? objStateArray[0].provinceState
: [];
} else {
this.stateArrayPayment = [];
}
} else {
this.paymentForm.get("phoneNoCode").patchValue("");
this.stateArrayPayment = [];
}
});

this.shipperForm
.get("countryShipper")
.valueChanges.subscribe((value: any) => {
if (value) {
this.shipperForm.get("phoneNoCode").patchValue(value);
let objStateArray = this.countryData.success.filter(
(data) => data.countryCode == value
);
if (objStateArray.length > 0) {
this.stateArrayShipper =
objStateArray.length > 0 && objStateArray[0].provinceState
? objStateArray[0].provinceState
: [];
} else {
this.stateArrayShipper = [];
}
} else {
this.shipperForm.get("phoneNoCode").patchValue("");
this.stateArrayShipper = [];
}
});

this.consigneeForm
.get("countryConsignee")
.valueChanges.subscribe((value: any) => {
if (value) {
this.consigneeForm.get("phoneNoCode").patchValue(value);
let objStateArray = this.countryData.success.filter(
(data) => data.countryCode == value
);
if (objStateArray.length > 0) {
this.stateArrayConsignee =
objStateArray.length > 0 && objStateArray[0].provinceState
? objStateArray[0].provinceState
: [];
} else {
this.stateArrayConsignee = [];
}
} else {
this.consigneeForm.get("phoneNoCode").patchValue("");
this.stateArrayConsignee = [];
}
});
 // End section for value changes country feilds
********************************************************************************

this.contactSortBy = {
name: "down",
title: "down",
email: "down",
};
this.billingSortBy = {
contact_name: "down",
email_adress: "down",
phone_number: "down",
};
}

fetchCustomerDetailsData() {
this.displayData = true;
this._loaderService.stringSubject.next(true);
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
let url = `${ServerURLS.getCustomerById.action}?customerId=${this.customerId}`;
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((data: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.customerData = data;
this.customerDetailsBoolean = true;
this.fetchedGmapId = this.customerData.general_details.g_map_id;

if (this.fetchedGmapId == "") {
this.isManualLookUp = true;
this.enalbeFields();
} else {
this.isManualLookUp = false;
this.disableFields();
}
if (
this.customerData.business_type_id &&
this.customerData.business_type_id.length > 0
) {
let urlForLoadAccessorialType =
ServerURLS.getAccessorialType.action +
`?locTypeId=${this.customerData.business_type_id}&locType=start`;
let promise = this.scHttpService.getHttpService(
urlForLoadAccessorialType,
""
);
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
let uniqueIds = [];
let unique = res.data.filter((element) => {
let isDuplicate = uniqueIds.includes(element.servIceId);
if (!isDuplicate) {
uniqueIds.push(element.servIceId);
return true;
 }
return false;
});
this.accessorialTypesFetchedAll = unique;
this.setCustomerDataFetched();
this.modalService.dismissAll();
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
} else {
this.setCustomerDataFetched();
this.modalService.dismissAll();
}
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
// this.redirectToCustomerList();
});
}

removeShipper(addrType) {
if (addrType == "shipper") {
this.addrTypeShipper = "shipper";
this.forforShipperCopy.patchValue({
shipperName: this.shipperForm.get("shipperName").value,
firstName: this.shipperForm.get("firstName").value,
lastName: this.shipperForm.get("lastName").value,
addressLine1Shipper: this.shipperForm.get("addressLine1Shipper").value,
addressLine2Shipper: this.shipperForm.get("addressLine2Shipper").value,
cityShipper: this.shipperForm.get("cityShipper").value,
stateShipper: this.shipperForm.get("stateShipper").value,
postalCodeShipper: this.shipperForm.get("postalCodeShipper").value,
countryShipper: this.shipperForm.get("countryShipper").value,
emailShipper: this.shipperForm.get("emailShipper").value,
phoneNoCode: this.shipperForm.get("phoneNoCode").value,
phoneNoShipper: this.shipperForm.get("phoneNoShipper").value,
phoneExtShipper: this.shipperForm.get("phoneExtShipper").value,
primaryContactInfo: {
companyName: "",
country: this.shipperForm.get("phoneNoCode").value,
 email: this.shipperForm.get("emailShipper").value,
firstName: this.shipperForm.get("firstName").value,
lastName: this.shipperForm.get("lastName").value,
phoneExt: this.shipperForm.get("phoneExtShipper").value,
phoneNumber: this.shipperForm.get("phoneNoShipper").value,
primary: true,
title: null,
},
});
this.shipperForm.patchValue({
addressId: "",
shipperName: "",
firstName: "",
lastName: "",
addressLine1Shipper: "",
addressLine2Shipper: "",
cityShipper: "",
stateShipper: "",
postalCodeShipper: "",
countryShipper: "",
emailShipper: "",
phoneNoCode: "",
phoneNoShipper: "",
phoneExtShipper: "",
});
this.isremoveShipper = true;
} else {
this.addrTypeConsignee = "consignee";
this.forforConsigneeCopy.patchValue({
consigneeName: this.consigneeForm.get("consigneeName").value,
firstName: this.consigneeForm.get("firstName").value,
lastName: this.consigneeForm.get("lastName").value,
addressLine1Consignee: this.consigneeForm.get("addressLine1Consignee")
.value,
addressLine2Consignee: this.consigneeForm.get("addressLine2Consignee")
.value,
cityConsignee: this.consigneeForm.get("cityConsignee").value,
stateConsignee: this.consigneeForm.get("stateConsignee").value,
postalCodeConsignee: this.consigneeForm.get("postalCodeConsignee")
.value,
countryConsignee: this.consigneeForm.get("countryConsignee").value,
emailConsignee: this.consigneeForm.get("emailConsignee").value,
phoneNoCode: this.consigneeForm.get("phoneNoCode").value,
phoneNoConsignee: this.consigneeForm.get("phoneNoConsignee").value,
phoneExtConsignee: this.consigneeForm.get("phoneExtConsignee").value,
primaryContactInfo: {
companyName: "",
country: this.consigneeForm.get("phoneNoCode").value,
email: this.consigneeForm.get("emailConsignee").value,
firstName: this.consigneeForm.get("firstName").value,
lastName: this.consigneeForm.get("lastName").value,
phoneExt: this.consigneeForm.get("phoneExtConsignee").value,
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value,
primary: true,
title: null,
},
});
this.consigneeForm.patchValue({
addressId: "",
 name: "",
consigneeName: "",
firstName: "",
lastName: "",
addressLine1Consignee: "",
addressLine2Consignee: "",
cityConsignee: "",
stateConsignee: "",
postalCodeConsignee: "",
countryConsignee: "",
emailConsignee: "",
phoneNoCode: "",
phoneNoConsignee: "",
phoneExtConsignee: "",
});
this.isremoveConsignee = true;
}
}

initialiseDefaultForms() {
this.customerForm = this.fb.group({
emailNotification: [true],
status: [""],
customerName: [
"",
[
Validators.required,
Validators.maxLength(48),
CustomValidators.onlySpaceCheckValidator,
],
],
addressLine1: [
"",
[
Validators.required,
Validators.maxLength(198),
CustomValidators.onlySpaceCheckValidator,
],
],
addressLine2: [
"",
[Validators.maxLength(48), CustomValidators.onlySpaceCheckValidator],
],
city: ["", [Validators.required, Validators.maxLength(48)]],
state: ["", Validators.required],
postalCode: ["", [Validators.required, Validators.maxLength(48)]],
country: ["", Validators.required],
email: [
"",
[
Validators.required,
Validators.pattern(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/),
Validators.maxLength(48),
],
],
website: ["", Validators.maxLength(199)],
contactName: ["", [Validators.required, Validators.maxLength(49)]],
phoneNoCode: [""],
position: ["", Validators.maxLength(45)],
 gmapId: [""],
phoneNo: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
Validators.required,
],
],
phoneExt: ["", [Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)]],
mobileNoCode: [""],
mobileNo: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
],
],
mobileExt: [
"",
[Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)],
],
});

this.contactForm = this.fb.group({
fnameContact: [
"",
[
Validators.required,
Validators.maxLength(45),
Validators.pattern(/^[a-zA-Z]*$/),
],
],
lnameContact: [
"",
[
Validators.required,
Validators.maxLength(45),
Validators.pattern(/^[a-zA-Z]*$/),
],
],
titleContact: [
"",
[Validators.maxLength(19), CustomValidators.onlySpaceCheckValidator],
],
emailContact: [
"",
[Validators.email, Validators.maxLength(49), Validators.required],
],
phoneNoContact: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.required,
Validators.maxLength(10),
Validators.minLength(10),
],
 ],
phoneExtContact: [
"",
[Validators.maxLength(4), Validators.pattern(/^^[0-9]*$/)],
],
mobileNoContact: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
],
],
countryCode: ["CA"],
countryCodeM: ["CA"],
});

this.paymentForm = this.fb.group({
nameBilling: [
"",
[
Validators.required,
Validators.maxLength(45),
CustomValidators.onlySpaceCheckValidator,
],
],
titleBilling: [
"",
[Validators.maxLength(45), CustomValidators.onlySpaceCheckValidator],
],
contactNameBilling: [
"",
[
Validators.required,
Validators.maxLength(20),
Validators.pattern(/^[a-zA-Z]*$/),
],
],
contactLastNamebilling: [
"",
[
Validators.required,
Validators.maxLength(20),
Validators.pattern(/^[a-zA-Z]*$/),
],
],
addressLine1Billing: [
"",
[Validators.required, CustomValidators.onlySpaceCheckValidator],
],
addressLine2Billing: ["", [CustomValidators.onlySpaceCheckValidator]],
cityBilling: ["", [Validators.required, Validators.maxLength(48)]],
stateBilling: ["", Validators.required],
postalCodeBilling: ["", [Validators.required, Validators.maxLength(48)]],
countryBilling: ["", Validators.required],
emailBilling: ["", [Validators.required, Validators.email]],
attentionBilling: ["", Validators.maxLength(49)],
phoneNoBilling: [
"",
 [
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
Validators.required,
],
],
phoneExtBilling: [
"",
[Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)],
],
phoneNoCode: [{ value: "", disabled: true }],
faxNoBilling: [
"",
[Validators.maxLength(20), Validators.pattern(/^[0-9]*$/)],
],
faxPrefixBilling: [
"",
[Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)],
],
statusBilling: ["false"],
defaultPayment: [false],
});

this.accAndPickupDeliveryForm = this.fb.group({
bStatus: [""],
aNotes: ["", Validators.maxLength(198)],
pickInst: ["", Validators.maxLength(198)],
delInst: ["", Validators.maxLength(198)],
});

this.shipperForm = this.fb.group({
selectShipper: [""],
shipperName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
firstName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
lastName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
addressLine1Shipper: ["", [, CustomValidators.onlySpaceCheckValidator]],
addressLine2Shipper: ["", [, CustomValidators.onlySpaceCheckValidator]],
cityShipper: ["", [, Validators.maxLength(48)]],
stateShipper: [""],
postalCodeShipper: ["", [, Validators.maxLength(48)]],
countryShipper: [""],
emailShipper: ["", [, Validators.email]],
phoneNoCode: [""],
phoneNoShipper: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
 ],
],
phoneExtShipper: [
"",
[Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)],
],
});

this.consigneeForm = this.fb.group({
selectConsignee: [""],
consigneeName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
firstName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
lastName: [
"",
[, Validators.maxLength(50), CustomValidators.onlySpaceCheckValidator],
],
addressLine1Consignee: ["", [, CustomValidators.onlySpaceCheckValidator]],
addressLine2Consignee: ["", [, CustomValidators.onlySpaceCheckValidator]],
cityConsignee: [""],
stateConsignee: [""],
postalCodeConsignee: [""],
countryConsignee: [""],
phoneNoCode: [""],
emailConsignee: ["", [, Validators.email]],
phoneNoConsignee: [
"",
[
Validators.pattern(/^(0|[1-9]\d*)?$/),
Validators.maxLength(10),
Validators.minLength(10),
],
],
phoneExtConsignee: [
"",
[Validators.maxLength(4), Validators.pattern(/^[0-9]*$/)],
],
});

this.orderEntryForm = this.fb.group({
orderCategory: [""],
poRequired: [{ value: true, disabled: false }],
asHasMat: [false],
});
}

setCustomerDataFetched() {
this.setFetchedDataGeneralDetail();
this.setFetchedOrderEntryDataAndDelivPickup();
this.setFetchedContactInfoListAndPaymentList();
this.setAccServiceAndPackageType();
}
enalbeFields() {
this.customerForm.get("city").enable();
 this.customerForm.get("postalCode").enable();
this.customerForm.get("state").enable();
this.customerForm.get("country").enable();
// this.customerForm.get('phoneNoCode').enable();
// this.customerForm.get('mobileNoCode').enable();
}
disableFields() {
this.customerForm.get("city").disable();
this.customerForm.get("postalCode").disable();
this.customerForm.get("state").disable();
this.customerForm.get("country").disable();
// this.customerForm.get('phoneNoCode').disable();
// this.customerForm.get('mobileNoCode').disable();
}
makeFieldDisableInShipperAndConsignee(mode) {
if (mode === "ship") {
this.shipperForm.get("cityShipper").disable();
this.shipperForm.get("countryShipper").disable();
this.shipperForm.get("postalCodeShipper").disable();
this.shipperForm.get("stateShipper").disable();
} else if (mode === "con") {
this.consigneeForm.get("cityConsignee").disable();
this.consigneeForm.get("countryConsignee").disable();
this.consigneeForm.get("postalCodeConsignee").disable();
this.consigneeForm.get("stateConsignee").disable();
}
}
makeFieldEnableInShipperAndConsignee(mode) {
if (mode === "ship") {
this.shipperForm.get("cityShipper").enable();
this.shipperForm.get("countryShipper").enable();
this.shipperForm.get("postalCodeShipper").enable();
this.shipperForm.get("stateShipper").enable();
} else if (mode === "con") {
this.consigneeForm.get("cityConsignee").enable();
this.consigneeForm.get("countryConsignee").enable();
this.consigneeForm.get("postalCodeConsignee").enable();
this.consigneeForm.get("stateConsignee").enable();
}
}
makeDisableInPaymentForm() {
this.paymentForm.get("cityBilling").disable();
this.paymentForm.get("countryBilling").disable();
this.paymentForm.get("postalCodeBilling").disable();
this.paymentForm.get("stateBilling").disable();
}
makeEnableInPaymentForm() {
this.paymentForm.get("cityBilling").enable();
this.paymentForm.get("countryBilling").enable();
this.paymentForm.get("postalCodeBilling").enable();
this.paymentForm.get("stateBilling").enable();
}
setAccServiceAndPackageType() {
this.selectedServices = [];
this.selectedPackages = [];
this.selectedAccessorial = [];
if (
this.customerData.accessorials_type &&
this.customerData.accessorials_type.length > 0
 ) {
this.customerData.accessorials_type.map((data) => {
let alreadyContainedAcc = this.accessorialTypesFetchedAll.filter(
(dataAll) => data.accessorial_id == dataAll.servIceId
);
if (alreadyContainedAcc.length > 0) {
this.selectedAccessorial.push(alreadyContainedAcc[0]);
}
});
}

if (
this.customerData.services_type &&
this.customerData.services_type.length > 0
) {
this.customerData.services_type.map((data) => {
let alreadyContainedService = this.serviceType.filter(
(dataService) => dataService.services_id == data.services_id
);
if (alreadyContainedService.length > 0) {
this.selectedServices.push(alreadyContainedService[0]);
}
});
}

// set package type according to already fetched service

**********************************************

this.selectedServices.map((data) => {
if (data.services.toLowerCase() == "courier") {
let fetchArrayForCourierPack = this.servicePackageTypeFetched.filter(
(dataAll) => dataAll.shippingModeId == data.services_id
);
if (fetchArrayForCourierPack.length > 0) {
fetchArrayForCourierPack[0].packagingDetails.map((dataFetc) => {
let objForPackages = {
package_id: dataFetc.packagingId,
packages: `${dataFetc.packagingType} (courier)`,
shipmentCode: fetchArrayForCourierPack[0].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
} else if (data.shipmentCode == "FTL") {
let fetchArrayForFTLPack = this.servicePackageTypeFetched.filter(
(dataAll) => dataAll.shippingModeId == data.services_id
);
if (fetchArrayForFTLPack.length > 0) {
fetchArrayForFTLPack[0].shipmentTypeDetails.map((dataFetc) => {
let objForPackages = {
package_id: dataFetc.shipmentTypeAssocId,
packages: `${dataFetc.shipmentType} ($
{fetchArrayForFTLPack[0].shipmentCode})`,
shipmentCode: fetchArrayForFTLPack[0].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
} else {
 let fetchArrayForOtherPack = this.servicePackageTypeFetched.filter(
(dataAll) => dataAll.shippingModeId == data.services_id
);
if (fetchArrayForOtherPack.length > 0) {
fetchArrayForOtherPack[0].packagingTypeDetails.map((dataFetc) => {
let objForPackages = {
package_id: dataFetc.packagingId,
packages: `${dataFetc.packagingName} ($
{fetchArrayForOtherPack[0].shipmentCode})`,
shipmentCode: fetchArrayForOtherPack[0].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
}
});
// **********************************************

// set fetched packages

******************************************************************************

if (
this.customerData.package_type &&
this.customerData.package_type.length > 0
) {
this.customerData.package_type.map((data) => {
let fetchArrayShipCode = this.servicePackageTypeFetched.filter(
(dataAll) => dataAll.shippingModeId == data.service_id
);
if (fetchArrayShipCode.length > 0) {
let getPackageMatched = this.packageType.filter(
(packData) =>
packData.shipmentCode == fetchArrayShipCode[0].shipmentCode &&
packData.package_id == data.package_id
);
this.selectedPackages.push(getPackageMatched[0]);
}
});
}
}

setFetchedDataGeneralDetail() {
// let status = this.customerData.general_details.status.toLowerCase() ==
'active' ? 'active' : 'inactive';
this.customerForm.patchValue({
emailNotification:
this.customerData.general_details.is_email_notif_require,
status: status,
customerName: this.customerData.general_details.customer_name
? this.customerData.general_details.customer_name
: "",
addressLine1: this.customerData.general_details.address_line1
? this.customerData.general_details.address_line1
: "",
addressLine2: this.customerData.general_details.address_line2
? this.customerData.general_details.address_line2
: "",
city: this.customerData.general_details.city
? this.customerData.general_details.city
 : "",
state: this.customerData.general_details.state
? this.customerData.general_details.state
: "",
postalCode: this.customerData.general_details.postal_code
? this.customerData.general_details.postal_code
: "",
country: this.customerData.general_details.country
? this.customerData.general_details.country
: "",
email: this.customerData.general_details.email_address
? this.customerData.general_details.email_address
: "",
website: this.customerData.general_details.website
? this.customerData.general_details.website
: "",
contactName: this.customerData.general_details.contact_name
? this.customerData.general_details.contact_name
: "",
phoneNoCode: this.customerData.general_details.country
? this.customerData.general_details.country
: "",
position: this.customerData.general_details.position
? this.customerData.general_details.position
: "",
phoneNo: this.customerData.general_details.phone_number
? this.customerData.general_details.phone_number
: "",
phoneExt: this.customerData.general_details.phone_ext
? this.customerData.general_details.phone_ext
: "",
mobileNoCode: this.customerData.general_details.country
? this.customerData.general_details.country
: "",
mobileNo: this.customerData.general_details.mobile_number
? this.customerData.general_details.mobile_number
: "",
mobileExt: this.customerData.general_details.mobile_ext
? this.customerData.general_details.mobile_ext
: "",
});
if (
this.customerData.general_details.image_download_url &&
this.customerData.general_details.image_download_url.length > 0 &&
this.customerData.general_details.image_download_url !== "NA"
) {
this.uploadImageShow =
this.customerData.general_details.image_download_url;
}
}

setFetchedContactInfoListAndPaymentList() {
this.contactInfromationList = [];
this.billingLocationList = [];
if (
this.customerData.contact_information &&
this.customerData.contact_information.length > 0
) {
this.customerData.contact_information.map((data) => {
 let tempobjForEditContactInfo = {
first_name: data.first_name ? data.first_name : "",
last_name: data.last_name ? data.last_name : "",
name: `${data.first_name ? data.first_name : ""} ${
data.last_name ? data.last_name : ""
}`,
title: data.title ? data.title : "",
is_primary_contact: data.is_primary_contact
? data.is_primary_contact
: false,
phone: data.phone_number ? data.phone_number : "",
email: data.email_address ? data.email_address : "",
is_email_sms_notif_require: data.is_email_sms_notif_require
? data.is_email_sms_notif_require
: false,
checked: false,
status: data.status ? data.status : false,
contact_map_id: data.contact_map_id ? data.contact_map_id : "",
phone_ext: data.phone_ext ? data.phone_ext : "",
mobile_number: data.mobile_number ? data.mobile_number : "",
country_code: data.country_code ? data.country_code : "",
};
this.contactInfromationList.push(tempobjForEditContactInfo);
});
}

if (
this.customerData.payment_location &&
this.customerData.payment_location.length > 0
) {
this.customerData.payment_location.map((data) => {
let tempobjForEditPaymentInfo = {
billing_id: data.billing_id ? data.billing_id : "",
billing_address_id: data.billing_address_id
? data.billing_address_id
: "",
company_name: data.company_name ? data.company_name : "",
title: data.title ? data.title : "",
contact_name: data.contact_name ? data.contact_name : "",
address_line1: data.address_line1 ? data.address_line1 : "",
address_line2: data.address_line2 ? data.address_line2 : "",
city: data.city ? data.city : "",
state: data.state ? data.state : "",
zip_code: data.zip_code ? data.zip_code : "",
country: data.country ? data.country : "",
email_adress: data.email_adress ? data.email_adress : "",
attention: data.attention ? data.attention : "",
phone_number: data.phone_number ? data.phone_number : "",
phone_ext: data.phone_ext ? data.phone_ext : "",
fax: data.fax ? data.fax : "",
fax_prefix: data.fax_prefix ? data.fax_prefix : "",
status: data.status ? "true" : "false",
is_default_payment_location: data.is_default_payment_location
? data.is_default_payment_location
: false,
// Below is the fixed code for google manual toggle
google_map_id: data.google_map_id === "" ? "" : data.google_map_id,
};
this.billingLocationList.push(tempobjForEditPaymentInfo);
 });
}
}

setFetchedOrderEntryDataAndDelivPickup() {
if (this.customerData.shipper_addr) {
// Below is the fixed code for google manual toggle
if (this.customerData.shipper_addr.fullAddr != "") {
this.isManualLookUpShipper =
this.customerData.shipper_addr.googleMapId != "" ? false : true;
this.gMapIdInShipper = this.customerData.shipper_addr.googleMapId;
}
if (!this.isManualLookUpShipper) {
this.makeFieldDisableInShipperAndConsignee("ship");
}
this.shipperForm.patchValue({
shipperName: this.customerData.shipper_addr.company
? this.customerData.shipper_addr.company
: "",
firstName: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.firstName
? this.customerData.shipper_addr.primaryContactInfo.firstName
: ""
: "",
lastName: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.lastName
? this.customerData.shipper_addr.primaryContactInfo.lastName
: ""
: "",
addressLine1Shipper: this.customerData.shipper_addr.addrLine1
? this.customerData.shipper_addr.addrLine1
: "",
addressLine2Shipper: this.customerData.shipper_addr.addrLine2
? this.customerData.shipper_addr.addrLine2
: "",
cityShipper: this.customerData.shipper_addr.city
? this.customerData.shipper_addr.city
: "",
stateShipper: this.customerData.shipper_addr.state
? this.customerData.shipper_addr.state
: "",
postalCodeShipper: this.customerData.shipper_addr.zipCode
? this.customerData.shipper_addr.zipCode
: "",
countryShipper: this.customerData.shipper_addr.country
? this.customerData.shipper_addr.country
: "",
emailShipper: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.email
? this.customerData.shipper_addr.primaryContactInfo.email
: ""
: "",
phoneNoCode: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.country
? this.customerData.shipper_addr.primaryContactInfo.country
: ""
: "",
phoneNoShipper: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.phoneNumber
 ? this.customerData.shipper_addr.primaryContactInfo.phoneNumber
: ""
: "",
phoneExtShipper: this.customerData.shipper_addr.primaryContactInfo
? this.customerData.shipper_addr.primaryContactInfo.phoneExt
? this.customerData.shipper_addr.primaryContactInfo.phoneExt
: ""
: "",
});
}

if (this.customerData.consignee_addr) {
// Below is the fixed code for google manual toggle
if (this.customerData.consignee_addr.fullAddr != "") {
this.isManualLookUpConsignee =
this.customerData.consignee_addr.googleMapId == "" ||
this.customerData.consignee_addr.googleMapId === null
? true
: false;
this.gMapIdInConsignee = this.customerData.consignee_addr.googleMapId;
}
if (!this.isManualLookUpConsignee) {
this.makeFieldDisableInShipperAndConsignee("con");
}
console.log(this.customerData);

this.consigneeForm.patchValue({
consigneeName: this.customerData.consignee_addr.company
? this.customerData.consignee_addr.company
: "",
firstName: this.customerData.consignee_addr.primaryContactInfo
? this.customerData.consignee_addr.primaryContactInfo.firstName
? this.customerData.consignee_addr.primaryContactInfo.firstName
: ""
: "",
lastName: this.customerData.consignee_addr.primaryContactInfo
? this.customerData.consignee_addr.primaryContactInfo.lastName
? this.customerData.consignee_addr.primaryContactInfo.lastName
: ""
: "",
addressLine1Consignee: this.customerData.consignee_addr.addrLine1
? this.customerData.consignee_addr.addrLine1
: "",
addressLine2Consignee: this.customerData.consignee_addr.addrLine2
? this.customerData.consignee_addr.addrLine2
: "",
cityConsignee: this.customerData.consignee_addr.city
? this.customerData.consignee_addr.city
: "",
stateConsignee: this.customerData.consignee_addr.state
? this.customerData.consignee_addr.state
: "",
postalCodeConsignee: this.customerData.consignee_addr.zipCode
? this.customerData.consignee_addr.zipCode
: "",
countryConsignee: this.customerData.consignee_addr.country
? this.customerData.consignee_addr.country
: "",
phoneNoCode: this.customerData.consignee_addr.primaryContactInfo
 ? this.customerData.consignee_addr.primaryContactInfo.country
? this.customerData.consignee_addr.primaryContactInfo.country
: ""
: "",
emailConsignee: this.customerData.consignee_addr.primaryContactInfo
? this.customerData.consignee_addr.primaryContactInfo.email
? this.customerData.consignee_addr.primaryContactInfo.email
: ""
: "",
phoneNoConsignee: this.customerData.consignee_addr.primaryContactInfo
? this.customerData.consignee_addr.primaryContactInfo.phoneNumber
? this.customerData.consignee_addr.primaryContactInfo.phoneNumber
: ""
: "",
phoneExtConsignee: this.customerData.consignee_addr.primaryContactInfo
? this.customerData.consignee_addr.primaryContactInfo.phoneExt
? this.customerData.consignee_addr.primaryContactInfo.phoneExt
: ""
: "",
});
}

this.orderEntryForm.patchValue({
orderCategory: this.customerData.general_details.default_category
? this.customerData.general_details.default_category
: "",
poRequired: this.customerData.general_details.is_po_required
? this.customerData.general_details.is_po_required
: false,
asHasMat: this.customerData.general_details.is_haz_mat
? this.customerData.general_details.is_haz_mat
: false,
});

if (this.customerData.instruction) {
this.accAndPickupDeliveryForm.patchValue({
bStatus: this.customerData.business_type_id
? this.customerData.business_type_id
: "",
pickInst: this.customerData.instruction.pickup
? this.customerData.instruction.pickup
: "",
delInst: this.customerData.instruction.delivery
? this.customerData.instruction.delivery
: "",
aNotes: this.customerData.instruction.accessorial_note
? this.customerData.instruction.accessorial_note
: "",
});
}
}

uploadImage(event): void {
const reader = new FileReader();
reader.onload = () => {
if (reader.readyState === 2 && event.target.files[0]) {
this.uploadImageShow = this.domSanitizer.bypassSecurityTrustUrl(
reader.result as string
);
 this.imageData = event.target.files[0];
}
};
if (event.target.files[0]) {
reader.readAsDataURL(event.target.files[0]);
}
}

removeImage(): void {
this.uploadImageShow = "";
this.imageData = null;
}
stringContainerNumbersOrNot(name) {
let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// num.map((element)=>{

// if(name.includes(element)){

// return true;
// }
// })
let dataPresent = false;
for (let element of num) {
if (name.includes(element)) {
dataPresent = true;
}
}
return dataPresent;
}
custNameType: string = "";
customerNameType(name) {
if (name !== "") {
this.custNameType = "manual";
} else {
this.custNameType = "";
}
}
pickupTimeArr = [];
// Below is the fixed code for google manual toggle
gMapIdInBilling: string = "";
gMapIdInShipper: string = "";
gMapIdInConsignee: string = "";
handleAddressChange(dataAddress, factor) {
this.getzipcodestart(
dataAddress.formatted_address,
dataAddress.address_components,
dataAddress.geometry.location,
factor,
dataAddress.name
);
// checking for all the required feilds in the form coming from google
maps ......

if (factor == "general") {
this.setDataFromGoogleLocationOrErrorForGeneralDetails(dataAddress);
} else if (factor == "billing") {
// Below is the fixed code for google manual toggle
this.gMapIdInBilling = dataAddress.place_id;
this.setDataFromGoogleLocationOrErrorForBillingLocation();
 } else if (factor == "shipper") {
// Below is the fixed code for google manual toggle
this.gMapIdInShipper = dataAddress.place_id;
this.setDataFromGoogleLocationOrErrorForShipper();
} else if (factor == "consignee") {
// Below is the fixed code for google manual toggle
this.gMapIdInConsignee = dataAddress.place_id;
this.setDataFromGoogleLocationOrErrorForConsignee();
}
}

convert12hrsTo24hrs(time) {
let hours = Number(time.match(/^(\d+)/)[1]);
let minutes = Number(time.match(/:(\d+)/)[1]);
let AMPM = time.match(/\s(.*)$/)[1];
if (AMPM == "PM" && hours < 12) hours = hours + 12;
if (AMPM == "AM" && hours == 12) hours = hours - 12;
let sHours = hours.toString();
let sMinutes = minutes.toString();
if (hours < 10) sHours = "0" + sHours;
if (minutes < 10) sMinutes = "0" + sMinutes;
return sHours + ":" + sMinutes;
}

getTimeId(time24hrFormat) {
for (let timeId of this.pickupTimeArr) {
if (timeId.pickupTime == time24hrFormat) {
return timeId.pickupId;
}
}
}

getzipcodestart(formatted_address, address, geometry, factor, companyName) {

this.showErrorGoogleMap = false;
let tempObjSet = {
sourceAddress: {
companyName: this.stringContainerNumbersOrNot(companyName)
? ""
: companyName,
latitude: "",
longitude: "",
fullAddr: "",
addrLine1: "",
addrLine2: "",
country: "",
city: "",
state: "",
zipCode: "",
website: "",
},
};

if (geometry.lat()) {
tempObjSet["sourceAddress"]["latitude"] = geometry.lat();
tempObjSet["sourceAddress"]["longitude"] = geometry.lng();
tempObjSet["sourceAddress"]["fullAddr"] = formatted_address;
}

//get city and country and zipCode

 for (let key in address) {
if (address[key]["types"][0] == "country") {
tempObjSet["sourceAddress"]["country"] = address[key]["short_name"];
}

//select city
if (
address[key]["types"][0] == "locality" ||
address[key]["types"][0] == "sublocality_level_1"
) {
tempObjSet["sourceAddress"]["city"] = address[key]["short_name"];
}

//select state
if (address[key]["types"][0] == "administrative_area_level_1") {
tempObjSet["sourceAddress"]["state"] = address[key]["short_name"];
}

//select postal_code
if (address[key]["types"][0] == "postal_code") {
tempObjSet["sourceAddress"]["zipCode"] = address[key]["long_name"];
}

//select addressLine1 and 2

var stepStart = 0;
if (
!tempObjSet["sourceAddress"]["addrLine1"] &&
address[key]["types"][0] === "subpremise"
) {
stepStart++;
tempObjSet["sourceAddress"]["addrLine1"] = address[key]["long_name"];
}
if (
!tempObjSet["sourceAddress"]["addrLine1"] &&
address[key]["types"][0] === "street_number"
) {
stepStart++;
tempObjSet["sourceAddress"]["addrLine1"] = address[key]["long_name"];
}

if (
!tempObjSet["sourceAddress"]["addrLine1"] &&
address[key]["types"][0] === "route"
) {
stepStart++;
tempObjSet["sourceAddress"]["addrLine1"] = address[key]["long_name"];
}

if (
tempObjSet["sourceAddress"]["addrLine1"] &&
address[key]["types"][0] === "route"
) {
stepStart++;
tempObjSet["sourceAddress"]["addrLine2"] = address[key]["long_name"];
}
if (!tempObjSet["sourceAddress"]["addrLine1"] && !stepStart) {
//tempObjSet['sourceAddress']['addrLine1'] = formatted_address.split(", ")
[0];
//tempObjSet['sourceAddress']['addrLine2'] = formatted_address.split(", ")
[1];
//tempObjSet['sourceAddress']['addrLine1'] = " ";
//tempObjSet['sourceAddress']['addrLine2'] = " ";
// this.showErrorGoogleMap = true;
// return;
}

if (factor == "general") {
this.dataFromGoogleApiLocation = tempObjSet;
} else if (factor == "billing") {
this.billingDataFromGoogleApiLocation = tempObjSet;
} else if (factor == "shipper") {
this.shipperDataFromGoogleApiLocation = tempObjSet;
} else if (factor == "consignee") {
this.consigneeDataFromGoogleApiLocation = tempObjSet;
}
}
}

// section for logging errors

***********************************************************************************
****************************

logValidationErrors(group: FormGroup = this.customerForm): void {

Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
this.formErrors[key] = "";
if (
(abstractControl &&
!abstractControl.valid &&
(abstractControl.touched || abstractControl.dirty)) ||
this.submitClicked
) {
const messages = this.validationMessages[key];
for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrors[key] += messages[errorKey] + " ";
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrors(abstractControl);
}

// use this if using form array validation inside form group

********************************

// if (abstractControl instanceof FormArray) {

// for (const control of abstractControl.controls) {
// if (control instanceof FormGroup) {
// this.logValidationErrors(control)
// }
// }

// }
//
***********************************************************************************
***
});
}
logValidationErrorsContact(group: FormGroup = this.contactForm): void {
Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
this.formErrorsContact[key] = "";
if (
(abstractControl &&
!abstractControl.valid &&
(abstractControl.touched || abstractControl.dirty)) ||
this.submitClickedContact
) {
const messages = this.validationMessagesContact[key];
for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrorsContact[key] += messages[errorKey] + " ";
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrors(abstractControl);
}
});
}

logValidationErrorsBilling(group: FormGroup = this.paymentForm): void {

Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
this.formErrorsBilling[key] = "";
if (
(abstractControl &&
!abstractControl.valid &&
(abstractControl.touched || abstractControl.dirty)) ||
this.submitClickedBilling
) {
const messages = this.validationMessagesBilling[key];
for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrorsBilling[key] += messages[errorKey] + " ";
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrorsBilling(abstractControl);
}
});
}

logValidationErrorsShipper(group: FormGroup = this.shipperForm): void {

Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
this.formErrorsShipper[key] = "";
if (
(abstractControl &&
!abstractControl.valid &&
(abstractControl.touched || abstractControl.dirty)) ||
this.submitClicked
) {
const messages = this.validationMessagesShipper[key];
for (const errorKey in abstractControl.errors) {
 console.log(errorKey);
if (errorKey) {
this.formErrorsShipper[key] += messages[errorKey] + " ";
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrorsShipper(abstractControl);
}
});
}

logValidationErrorsConsignee(group: FormGroup = this.consigneeForm): void {

Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
this.formErrorsConsignee[key] = "";
if (
(abstractControl &&
!abstractControl.valid &&
(abstractControl.touched || abstractControl.dirty)) ||
this.submitClicked
) {
const messages = this.validationMessagesConsignee[key];
for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrorsConsignee[key] += messages[errorKey] + " ";
}
}
}
if (abstractControl instanceof FormGroup) {
this.logValidationErrorsConsignee(abstractControl);
}
});
}

// End section for logging errors

***********************************************************************************
****************************

toggleValueFunction(i, matchFactor) {
if (matchFactor == "checkBoxContact") {
this.contactInfromationList[i].checked =
!this.contactInfromationList[i].checked;
} else if (matchFactor == "notification") {
this.contactInfromationList[i].is_email_sms_notif_require =
!this.contactInfromationList[i].is_email_sms_notif_require;
} else if (matchFactor == "checkBoxBilling") {
this.billingLocationList[i].checked =
!this.billingLocationList[i].checked;
}
}

getCheckedValue(factor) {
let count = 0;
if (factor == "contact") {
this.contactInfromationList.map((data) => {
if (data.checked) {
count++;
}
 });
} else if (factor == "billing") {
this.billingLocationList.map((data) => {
if (data.checked) {
count++;
}
});
}
if (count > 0) {
return true;
} else {
return false;
}
}

removeMultipleFromTable(factor) {
this.modalService
.open(this.confirmModal, {
centered: true,
backdropClass: "light-blue-backdrop",
backdrop: "static",
})
.result.then(
(result) => {
if (result == "Save click") {
if (factor == "contact") {
this.contactInfromationList = this.contactInfromationList.filter(
(data) =>
(data.checked && data.contact_map_id !== "new") ||
!data.checked
);
let filterArrayForCheckedContact =
this.contactInfromationList.filter(
(data) => data.checked && data.contact_map_id !== "new"
);
let arrayforRemovedMultiple = [];

filterArrayForCheckedContact.map((data) => {
arrayforRemovedMultiple.push(data.contact_map_id);
});
// this.modalService.open(this.loadContent, { centered: true,
backdropClass: 'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static'
})
let str = arrayforRemovedMultiple.join(",");
let url = `${ServerURLS.removeCustomerContactInfo.action}?
customerContactMapId=${str}`;
let promise = this.scHttpService.deleteHttpService(url, "");
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.modalService.dismissAll();
this.toastr.success(
`${
res.message
? res.message
: "Contact information deleted successfully"
}`,
"",
 {
timeOut: 3000,
}
);
arrayforRemovedMultiple.map((dataToRemove) => {
this.contactInfromationList =
this.contactInfromationList.filter(
(data) => data.contact_map_id !== dataToRemove
);
});
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
} else if (factor == "billing") {
this.billingLocationList = this.billingLocationList.filter(
(data) =>
(data.checked && data.billing_id !== "new") || !data.checked
);
let filterArrayForCheckedBilling =
this.billingLocationList.filter(
(data) => data.checked && data.billing_id !== "new"
);
let arrayforRemovedMultiple = [];

filterArrayForCheckedBilling.map((data) => {
arrayforRemovedMultiple.push(data.billing_id);
});
// this.modalService.open(this.loadContent, { centered: true,
backdropClass: 'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static'
})
let str = arrayforRemovedMultiple.join(",");
let url = `${ServerURLS.removeCustomerBillingInfo.action}?billingId=$
{str}`;
let promise = this.scHttpService.deleteHttpService(url, "");
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.modalService.dismissAll();
this.toastr.success(
`${
res.message
? res.message
: "Billing location deleted successfully"
}`,
"",
{
timeOut: 3000,
}
 );
arrayforRemovedMultiple.map((dataToRemove) => {
this.billingLocationList = this.billingLocationList.filter(
(data) => data.billing_id !== dataToRemove
);
});
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
}
}
},
(reason) => {}
);
}

deleteRow(factor, i) {
if (factor == "contact") {
let filterArrayForRemovedContact = this.contactInfromationList.filter(
(data, index) => index !== i
);
this.contactInfromationList = filterArrayForRemovedContact;
} else if (factor == "billing") {
let filterArrayForRemovedBilling = this.billingLocationList.filter(
(data, index) => index !== i
);
this.billingLocationList = filterArrayForRemovedBilling;
}
}

toggleManualLookUp(type) {
if (type == "cur") {
this.isManualLookUp = !this.isManualLookUp;
if (!this.isManualLookUp) {
this.disableFields();
} else {
this.enalbeFields();
}
this.customerForm.get("city").reset();
this.customerForm.get("postalCode").reset();
this.customerForm.get("state").reset();
this.customerForm.get("country").reset();
this.customerForm.get("website").reset();
this.customerForm.get("addressLine1").reset();
if (this.custNameType !== "manual") {
// this.customerForm.get('customerName').reset();
}
this.fetchedGmapId = "";
} else if (type == "pay") {
 this.isManualLookUpPay = !this.isManualLookUpPay;
// Below is the fixed code for google manual toggle
if (!this.isManualLookUpPay) {
this.makeDisableInPaymentForm();
} else {
this.makeEnableInPaymentForm();
}
if (this.isCompanyNameIsManualInBilling === "") {
this.paymentForm.get("nameBilling").reset();
}
this.paymentForm.get("addressLine1Billing").reset();
this.paymentForm.get("addressLine2Billing").reset();
this.paymentForm.get("cityBilling").reset();
this.paymentForm.get("countryBilling").reset();
this.paymentForm.get("postalCodeBilling").reset();
this.paymentForm.get("stateBilling").reset();
this.paymentForm.get("phoneNoCode").reset();
} else if (type == "shi") {
this.isManualLookUpShipper = !this.isManualLookUpShipper;

// Below is the fixed code for google manual toggle

if (!this.isManualLookUpShipper) {
this.makeFieldDisableInShipperAndConsignee("ship");
} else {
this.gMapIdInShipper = "";
this.makeFieldEnableInShipperAndConsignee("ship");
}
if (!this.shipperNameInShipperEntry) {
this.shipperForm.get("shipperName").reset();
}
this.shipperForm.get("addressLine1Shipper").reset();
this.shipperForm.get("firstName").reset();
this.shipperForm.get("lastName").reset();
this.shipperForm.get("cityShipper").reset();
this.shipperForm.get("countryShipper").reset();
this.shipperForm.get("postalCodeShipper").reset();
this.shipperForm.get("stateShipper").reset();
this.shipperForm.get("phoneNoCode").reset();
} else if (type == "con") {
this.isManualLookUpConsignee = !this.isManualLookUpConsignee;

if (!this.consigneeNameIsManualOrNot) {
this.consigneeForm.get("consigneeName").reset();
}
// Below is the fixed code for google manual toggle
if (!this.isManualLookUpConsignee) {
this.makeFieldDisableInShipperAndConsignee("con");
} else {
this.gMapIdInConsignee = "";
this.makeFieldEnableInShipperAndConsignee("con");
}
this.consigneeForm.get("addressLine1Consignee").reset();
this.consigneeForm.get("cityConsignee").reset();
this.consigneeForm.get("countryConsignee").reset();
this.consigneeForm.get("postalCodeConsignee").reset();
this.consigneeForm.get("stateConsignee").reset();
this.consigneeForm.get("phoneNoCode").reset();
}
}
 // General Details section functions ******************** ********************
******************** ******************** ********************

setDataFromGoogleLocationOrErrorForGeneralDetails(dataAddress) {
let stateArray = this.countryData.success.filter(
(data) =>
data.countryCode == this.dataFromGoogleApiLocation.sourceAddress.country
);
this.stateArray =
stateArray.length > 0 && stateArray[0].provinceState
? stateArray[0].provinceState
: [];
// this.customerForm.patchValue({
// customerName: dataAddress['name'] ? dataAddress['name'] : ''
// })

if (
(this.dataFromGoogleApiLocation.sourceAddress.addrLine1.length == 0 &&
this.dataFromGoogleApiLocation.sourceAddress.addrLine2.length == 0) ||
this.dataFromGoogleApiLocation.sourceAddress.country.length == 0 ||
this.dataFromGoogleApiLocation.sourceAddress.city.length == 0 ||
this.dataFromGoogleApiLocation.sourceAddress.state.length == 0 ||
this.dataFromGoogleApiLocation.sourceAddress.zipCode.length == 0
) {
this.customerForm.patchValue({
customerName: this.dataFromGoogleApiLocation.sourceAddress.companyName,
addressLine1: this.dataFromGoogleApiLocation.sourceAddress.fullAddr,
// addressLine2: this.dataFromGoogleApiLocation.sourceAddress.addrLine1,
country: this.dataFromGoogleApiLocation.sourceAddress.country,
city: this.dataFromGoogleApiLocation.sourceAddress.city,
state: this.dataFromGoogleApiLocation.sourceAddress.state,
postalCode: this.dataFromGoogleApiLocation.sourceAddress.zipCode,
phoneNoCode: this.dataFromGoogleApiLocation.sourceAddress.country,
mobileNoCode: this.dataFromGoogleApiLocation.sourceAddress.country,
gmapId: dataAddress.place_id ? dataAddress.place_id : "",
});
this.showErrorGoogleMap = true;
} else {
// if (this.customerForm.get("customerName").value === '') {
// if (this.dataFromGoogleApiLocation.sourceAddress.companyName !== '' &&
this.custNameType !== 'manual') {
// this.customerForm.patchValue({
// customerName:
this.dataFromGoogleApiLocation.sourceAddress.companyName
// })
// }
// } else {
// if (this.custNameType !== 'manual' &&
this.customerForm.get('customerName').value !== '') {
// this.customerForm.patchValue({
// customerName:
this.dataFromGoogleApiLocation.sourceAddress.companyName
// })
// }
// }

this.showErrorGoogleMap = false;
this.customerForm.patchValue({
 // customerName:this.dataFromGoogleApiLocation.sourceAddress.companyName,

addressLine1: this.dataFromGoogleApiLocation.sourceAddress.fullAddr,
// addressLine2: this.dataFromGoogleApiLocation.sourceAddress.addrLine1,
country: this.dataFromGoogleApiLocation.sourceAddress.country,
city: this.dataFromGoogleApiLocation.sourceAddress.city,
state: this.dataFromGoogleApiLocation.sourceAddress.state,
postalCode: this.dataFromGoogleApiLocation.sourceAddress.zipCode,
gmapId: dataAddress.place_id ? dataAddress.place_id : "",
});
if (dataAddress.website) {
this.customerForm.patchValue({ website: dataAddress.website });
}
}
}

// End General Details section functions ********************

******************** ******************** ******************** ********************

// Contact Information section functions ********************

******************** ******************** ******************** ********************

submitClickedContactShowError() {
// setting the value true and calling error log function for submitClicked so
that required feild highlight when save clicked
this.submitClickedContact = true;
this.logValidationErrorsContact(this.contactForm);
}

open(content, openMode, index = -1) {

// setting the value false for submitClicked so that required feild dont
highlight till button clicked
this.submitClickedContact = false;

if (openMode == "add") {
this.contactForm.reset();
this.contactForm.patchValue({ countryCode: "CA" });
}
this.modalService.open(content).result.then(
(result) => {
if (result == "Save click") {
// after save clicked check it is for exesting or new new will be
negative value ....
if (index >= 0) {
this.contactInfromationList[index].first_name =
this.contactForm.get("fnameContact").value
? this.contactForm.get("fnameContact").value
: "";
this.contactInfromationList[index].last_name = this.contactForm.get(
"lnameContact"
).value
? this.contactForm.get("lnameContact").value
: "";
this.contactInfromationList[index].name = `${
this.contactForm.get("fnameContact").value
? this.contactForm.get("fnameContact").value
: ""
} ${
this.contactForm.get("lnameContact").value
 ? this.contactForm.get("lnameContact").value
: ""
}`;
this.contactInfromationList[index].title = this.contactForm.get(
"titleContact"
).value
? this.contactForm.get("titleContact").value
: "";
this.contactInfromationList[index].email = this.contactForm.get(
"emailContact"
).value
? this.contactForm.get("emailContact").value
: "";
this.contactInfromationList[index].phone = this.contactForm.get(
"phoneNoContact"
).value
? this.contactForm.get("phoneNoContact").value
: "";
this.contactInfromationList[index].phone_ext = this.contactForm.get(
"phoneExtContact"
).value
? this.contactForm.get("phoneExtContact").value
: "";
this.contactInfromationList[index].mobile_number =
this.contactForm.get("mobileNoContact").value
? this.contactForm.get("mobileNoContact").value
: "";
this.contactInfromationList[index].country_code =
this.contactForm.get("countryCode").value
? this.contactForm.get("countryCode").value
: "";
} else {
let tempobjForNewContactInfo = {
first_name: this.contactForm.get("fnameContact").value
? this.contactForm.get("fnameContact").value
: "",
last_name: this.contactForm.get("lnameContact").value
? this.contactForm.get("lnameContact").value
: "",
name: `${
this.contactForm.get("fnameContact").value
? this.contactForm.get("fnameContact").value
: ""
} ${
this.contactForm.get("lnameContact").value
? this.contactForm.get("lnameContact").value
: ""
}`,
title: this.contactForm.get("titleContact").value
? this.contactForm.get("titleContact").value
: "",
is_primary_contact: false,
phone: this.contactForm.get("phoneNoContact").value,
email: this.contactForm.get("emailContact").value
? this.contactForm.get("emailContact").value
: "",
is_email_sms_notif_require: true,
checked: false,
status: true,
 contact_map_id: "new",
phone_ext: this.contactForm.get("phoneExtContact").value
? this.contactForm.get("phoneExtContact").value
: "",
mobile_number: this.contactForm.get("mobileNoContact").value
? this.contactForm.get("mobileNoContact").value
: "",
country_code: this.contactForm.get("countryCode").value
? this.contactForm.get("countryCode").value
: "",
};
this.contactInfromationList.push(tempobjForNewContactInfo);
}
}
},
(reason) => {}
);
}
isContactEditId: any;
setContactFormValueEdit(index, modal) {
this.isContactEditId = index;
this.contactForm.patchValue({
fnameContact: this.contactInfromationList[index].first_name
? this.contactInfromationList[index].first_name
: "",
lnameContact: this.contactInfromationList[index].last_name
? this.contactInfromationList[index].last_name
: "",
titleContact: this.contactInfromationList[index].title
? this.contactInfromationList[index].title
: "",
emailContact: this.contactInfromationList[index].email
? this.contactInfromationList[index].email
: "",
phoneNoContact: this.contactInfromationList[index].phone
? this.contactInfromationList[index].phone
: "",
phoneExtContact: this.contactInfromationList[index].phone_ext
? this.contactInfromationList[index].phone_ext
: "",
mobileNoContact: this.contactInfromationList[index].mobile_number
? this.contactInfromationList[index].mobile_number
: "",
countryCode: this.contactInfromationList[index].country_code
? this.contactInfromationList[index].country_code
: "CA",
});
this.open(modal, "edit", index);
}

radioCheckContact(i) {
console.log(this.contactInfromationList[i]);
if (this.contactInfromationList[i].status) {
this.contactInfromationList[i].checked = false;
if (!this.contactInfromationList[i].is_primary_contact) {
this.contactInfromationList.map((data, index) => {
this.contactInfromationList[index].is_primary_contact = false;
});
this.contactInfromationList[i].is_primary_contact = true;
 }
} else {
this.toastr.error("You can't set the Inactive contact as Primary.");
}
}

// this.contactInfromationList.map((data,index)=>{

changeStatusContactInfo(contact_Map_id, status, index) {

console.log(this.contactInfromationList, "shgdh");
if (this.contactInfromationList.length > 0) {
if (this.contactInfromationList[index].is_primary_contact) {
this.toastr.error(
"You can't dectivate default selected primary contact"
);
} else {
this.changeStatusOfPrimaryContect(contact_Map_id, status, index);
}
} else {
this.toastr.error("Please Add one more contact");
}
}

changeStatusOfPrimaryContect(contact_Map_id, status, index) {

let url = `${ServerURLS.updateCustomerContactStatus.action}?
customerContactMapId=${contact_Map_id}&isActive=${status}`;
if (contact_Map_id !== "new") {
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
let promiseForUpdateStatus = this.scHttpService.deleteHttpService(
url,
""
);
promiseForUpdateStatus
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.contactInfromationList[index].status =
!this.contactInfromationList[index].status;
this.toastr.success(
`${
res.message ? res.message : "Contact status updated successfully"
}`,
"",
{
timeOut: 3000,
}
);
this.modalService.dismissAll();
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
 }`
);
});
} else {
this.contactInfromationList[index].status =
!this.contactInfromationList[index].status;
}
}

// End of Contact Information section functions ********************

******************** ******************** ******************** ********************

// Billing Location section functions ******************** ********************

******************** ******************** ********************

radioCheckBilling(i) {
if (!this.billingLocationList[i].is_default_payment_location) {
this.billingLocationList.map((data, index) => {
this.billingLocationList[index].is_default_payment_location = false;
});
this.billingLocationList[i].is_default_payment_location = true;
}
}

openModalBilling(contentBilling, openMode, index) {

this.submitClickedBilling = false;
this.dataPresentInBilling = false;
this.showErrorGoogleMapPayment = false;
// this.billingLocationList[index].is_manual_address ?
this.billingLocationList[index].is_manual_address : false
if (openMode == "add") {
// Below is the fixed code for google manual toggle
this.isManualLookUpPay = false;
if (!this.isManualLookUpPay) {
this.makeDisableInPaymentForm();
} else {
this.makeEnableInPaymentForm();
}
this.paymentForm.reset();
}
this.modalService.open(contentBilling, { size: "xl" }).result.then(
(result) => {
if (result == "Save click") {
if (index >= 0) {
this.billingLocationList[index].company_name = this.paymentForm.get(
"nameBilling"
).value
? this.paymentForm.get("nameBilling").value
: "";
this.billingLocationList[index].title = this.paymentForm.get(
"titleBilling"
).value
? this.paymentForm.get("titleBilling").value
: "";
this.billingLocationList[index].contact_name =
this.paymentForm.get("contactNameBilling").value +
" " +
this.paymentForm.get("contactLastNamebilling").value;
this.billingLocationList[index].address_line1 =
 this.paymentForm.get("addressLine1Billing").value
? this.paymentForm.get("addressLine1Billing").value
: "";
this.billingLocationList[index].address_line2 =
this.paymentForm.get("addressLine2Billing").value
? this.paymentForm.get("addressLine2Billing").value
: "";
this.billingLocationList[index].city = this.paymentForm.get(
"cityBilling"
).value
? this.paymentForm.get("cityBilling").value
: "";
this.billingLocationList[index].state = this.paymentForm.get(
"stateBilling"
).value
? this.paymentForm.get("stateBilling").value
: "";
this.billingLocationList[index].zip_code = this.paymentForm.get(
"postalCodeBilling"
).value
? this.paymentForm.get("postalCodeBilling").value
: "";
this.billingLocationList[index].country = this.paymentForm.get(
"countryBilling"
).value
? this.paymentForm.get("countryBilling").value
: "";
this.billingLocationList[index].email_adress = this.paymentForm.get(
"emailBilling"
).value
? this.paymentForm.get("emailBilling").value
: "";
this.billingLocationList[index].attention = this.paymentForm.get(
"attentionBilling"
).value
? this.paymentForm.get("attentionBilling").value
: "";
this.billingLocationList[index].phone_number = this.paymentForm.get(
"phoneNoBilling"
).value
? this.paymentForm.get("phoneNoBilling").value
: "";
this.billingLocationList[index].phone_ext = this.paymentForm.get(
"phoneExtBilling"
).value
? this.paymentForm.get("phoneExtBilling").value
: "";
this.billingLocationList[index].fax = this.paymentForm.get(
"faxNoBilling"
).value
? this.paymentForm.get("faxNoBilling").value
: "";
this.billingLocationList[index].fax_prefix = this.paymentForm.get(
"faxPrefixBilling"
).value
? this.paymentForm.get("faxPrefixBilling").value
: "";
this.billingLocationList[index].status =
this.paymentForm.get("statusBilling").value == "true"
 ? this.paymentForm.get("statusBilling").value
: "false";
this.billingLocationList[index].is_default_payment_location =
this.paymentForm.get("defaultPayment").value
? this.paymentForm.get("defaultPayment").value
: false;
// Below is the fixed code for google manual toggle
this.billingLocationList[index].google_map_id = this
.isManualLookUpPay
? ""
: this.gMapIdInBilling;
} else {
let tempobjForNewPaymentLoc = {
billing_id: "new",
billing_address_id: "new",
company_name: this.paymentForm.get("nameBilling").value
? this.paymentForm.get("nameBilling").value
: "",
title: this.paymentForm.get("titleBilling").value
? this.paymentForm.get("titleBilling").value
: "",
contact_name:
this.paymentForm.get("contactNameBilling").value +
" " +
this.paymentForm.get("contactLastNamebilling").value,
address_line1: this.paymentForm.get("addressLine1Billing").value
? this.paymentForm.get("addressLine1Billing").value
: "",
address_line2: this.paymentForm.get("addressLine2Billing").value
? this.paymentForm.get("addressLine2Billing").value
: "",
city: this.paymentForm.get("cityBilling").value
? this.paymentForm.get("cityBilling").value
: "",
state: this.paymentForm.get("stateBilling").value
? this.paymentForm.get("stateBilling").value
: "",
zip_code: this.paymentForm.get("postalCodeBilling").value
? this.paymentForm.get("postalCodeBilling").value
: "",
country: this.paymentForm.get("countryBilling").value
? this.paymentForm.get("countryBilling").value
: "",
email_adress: this.paymentForm.get("emailBilling").value
? this.paymentForm.get("emailBilling").value
: "",
attention: this.paymentForm.get("attentionBilling").value
? this.paymentForm.get("attentionBilling").value
: "",
phone_number: this.paymentForm.get("phoneNoBilling").value
? this.paymentForm.get("phoneNoBilling").value
: "",
phone_ext: this.paymentForm.get("phoneExtBilling").value
? this.paymentForm.get("phoneExtBilling").value
: "",
fax: this.paymentForm.get("faxNoBilling").value
? this.paymentForm.get("faxNoBilling").value
: "",
fax_prefix: this.paymentForm.get("faxPrefixBilling").value
 ? this.paymentForm.get("faxPrefixBilling").value
: "",
status:
this.paymentForm.get("statusBilling").value == "true"
? this.paymentForm.get("statusBilling").value
: "false",
// Below is the fixed code for google manual toggle
google_map_id: this.isManualLookUpPay ? "" : this.gMapIdInBilling,
};
if (this.billingLocationList.length == 0) {
tempobjForNewPaymentLoc["is_default_payment_location"] = true;
} else {
tempobjForNewPaymentLoc["is_default_payment_location"] = false;
}
this.billingLocationList.push(tempobjForNewPaymentLoc);
}
this.isContactEdit = false;
}
},
(reason) => {
this.isContactEdit = false;
}
);
}

submitClickedPaymentShowError() {
// setting the value true and calling error log function for submitClicked so
that required feild highlight when save clicked
this.submitClickedBilling = true;
this.logValidationErrorsBilling(this.paymentForm);
}

unsetState($event, type) {
if (type == "pay") {
this.paymentForm.patchValue({ stateBilling: "" });
} else if (type == "cur") {
this.customerForm.patchValue({ state: "" });
} else if (type == "shi") {
this.shipperForm.patchValue({ stateShipper: "" });
} else if (type == "con") {
this.consigneeForm.patchValue({ stateConsignee: "" });
}
}

billingRowEditId: any;
setDataForEdit(index, modal) {
this.billingRowEditId = index;

// Below is the fixed code for google manual toggle

this.isManualLookUpPay =
this.billingLocationList[index].google_map_id === "" ? true : false;

if (!this.isManualLookUpPay) {
this.makeDisableInPaymentForm();
} else {
this.makeEnableInPaymentForm();
}
// console.log(this.isManualLookUpPay)
this.paymentForm.patchValue({
nameBilling: this.billingLocationList[index].company_name
? this.billingLocationList[index].company_name
: "",
titleBilling: this.billingLocationList[index].title
? this.billingLocationList[index].title
: "",
contactNameBilling: this.billingLocationList[index].contact_name.split(
" "
)[0]
? this.billingLocationList[index].contact_name.split(" ")[0]
: "",
contactLastNamebilling: this.billingLocationList[
index
].contact_name.split(" ")[1]
? this.billingLocationList[index].contact_name.split(" ")[1]
: "",
addressLine1Billing: this.billingLocationList[index].address_line1
? this.billingLocationList[index].address_line1
: "",
addressLine2Billing: this.billingLocationList[index].address_line2
? this.billingLocationList[index].address_line2
: "",
cityBilling: this.billingLocationList[index].city
? this.billingLocationList[index].city
: "",
stateBilling: this.billingLocationList[index].state
? this.billingLocationList[index].state
: "",
postalCodeBilling: this.billingLocationList[index].zip_code
? this.billingLocationList[index].zip_code
: "",
countryBilling: this.billingLocationList[index].country
? this.billingLocationList[index].country
: "",
emailBilling: this.billingLocationList[index].email_adress
? this.billingLocationList[index].email_adress
: "",
attentionBilling: this.billingLocationList[index].attention
? this.billingLocationList[index].attention
: "",
phoneNoBilling: this.billingLocationList[index].phone_number
? this.billingLocationList[index].phone_number
: "",
phoneExtBilling: this.billingLocationList[index].phone_ext
? this.billingLocationList[index].phone_ext
: "",
faxNoBilling: this.billingLocationList[index].fax
? this.billingLocationList[index].fax
: "",
faxPrefixBilling: this.billingLocationList[index].fax_prefix
? this.billingLocationList[index].fax_prefix
: "",
statusBilling: this.billingLocationList[index].status
? this.billingLocationList[index].status
: "",
defaultPayment: this.billingLocationList[index]
.is_default_payment_location
? this.billingLocationList[index].is_default_payment_location
: "",
 });
this.isContactEdit = true;
this.openModalBilling(modal, "edit", index);
}

setDataFromGoogleLocationOrErrorForBillingLocation() {
if (this.paymentForm.get("nameBilling").value === "") {
if (
this.billingDataFromGoogleApiLocation.sourceAddress.companyName !==
"" &&
this.isCompanyNameIsManualInBilling !== "manual"
) {
this.paymentForm.patchValue({
nameBilling:
this.billingDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
} else {
if (
this.isCompanyNameIsManualInBilling !== "manual" &&
this.paymentForm.get("nameBilling").value !== ""
) {
this.paymentForm.patchValue({
nameBilling:
this.billingDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
}
this.paymentForm.patchValue({
// nameBilling:
this.billingDataFromGoogleApiLocation.sourceAddress.companyName,
addressLine1Billing:
this.billingDataFromGoogleApiLocation.sourceAddress.fullAddr,
// addressLine2Billing:
this.billingDataFromGoogleApiLocation.sourceAddress.addrLine1,
countryBilling:
this.billingDataFromGoogleApiLocation.sourceAddress.country,
cityBilling: this.billingDataFromGoogleApiLocation.sourceAddress.city,
stateBilling: this.billingDataFromGoogleApiLocation.sourceAddress.state,
postalCodeBilling:
this.billingDataFromGoogleApiLocation.sourceAddress.zipCode,
phoneNoCode: this.billingDataFromGoogleApiLocation.sourceAddress.country,
});

if (
(this.billingDataFromGoogleApiLocation.sourceAddress.addrLine1.length ==
0 &&
this.billingDataFromGoogleApiLocation.sourceAddress.addrLine2.length ==
0) ||
this.billingDataFromGoogleApiLocation.sourceAddress.country.length == 0 ||
this.billingDataFromGoogleApiLocation.sourceAddress.city.length == 0 ||
this.billingDataFromGoogleApiLocation.sourceAddress.state.length == 0 ||
this.billingDataFromGoogleApiLocation.sourceAddress.zipCode.length == 0
) {
this.showErrorGoogleMapPayment = true;
} else {
this.showErrorGoogleMapPayment = false;
}
 this.checkDataIsAlreadyPresentOrNot();
}

changeStatusBilling(billId, status, index) {

let url = `${
ServerURLS.updateCustomerBillingStatus.action
}?billingId=${billId}&isActive=${status == "true" ? "false" : "true"}`;
if (billId !== "new") {
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
let promiseForUpdateStatus = this.scHttpService.deleteHttpService(
url,
""
);
promiseForUpdateStatus
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.billingLocationList[index].status =
this.billingLocationList[index].status == "true" ? "false" : "true";
this.toastr.success(
`${
res.message ? res.message : "Billing status updated successfully"
}`,
"",
{
timeOut: 3000,
}
);
this.modalService.dismissAll();
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
} else {
// this.billingLocationList[index].status = !
this.billingLocationList[index].status;
if (this.billingLocationList[index].status === "true") {
this.billingLocationList[index].status = "false";
} else if (this.billingLocationList[index].status === "false") {
this.billingLocationList[index].status = "true";
}
}
}

// End Billing Location section functions ********************

******************** ******************** ******************** ********************

// Default accessorial functions ******************** ********************

******************** ******************** ********************
 onOptionsSelected(event) {
this.businessSelectionError = false;
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
let urlForLoadAccessorialType =
ServerURLS.getAccessorialType.action + `?locTypeId=${event}`;
let promise = this.scHttpService.getHttpService(
urlForLoadAccessorialType,
""
);
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
let uniqueIds = [];
let unique = res.data.filter((element) => {
let isDuplicate = uniqueIds.includes(element.servIceId);
if (!isDuplicate) {
uniqueIds.push(element.servIceId);
return true;
}
return false;
});
this.accessorialTypesFetchedAll = unique;
this.selectedAccessorial = [];
this.modalService.dismissAll();
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
}

addAccessorialPackageAndServices(i, type) {
if (type == "acc") {
let alreadyContainedAcc = this.selectedAccessorial.filter(
(data) => data.servIceId == this.accessorialTypesFetchedAll[i].servIceId
);
if (alreadyContainedAcc.length > 0) {
return;
} else {
this.selectedAccessorial.push(this.accessorialTypesFetchedAll[i]);
}
} else if (type == "ser") {
let alreadyContainedSer = this.selectedServices.filter(
(data) => data.services_id == this.serviceType[i].services_id
);
if (alreadyContainedSer.length > 0) {
return;
} else {
 if (this.serviceType[i].services.toLowerCase() == "courier") {
let fetchArrayForCourierPack = this.servicePackageTypeFetched.filter(
(data) => data.shippingModeId == this.serviceType[i].services_id
);
if (fetchArrayForCourierPack.length > 0) {
fetchArrayForCourierPack[0].packagingDetails.map((data) => {
let objForPackages = {
package_id: data.packagingId,
packages: `${data.packagingType} (courier)`,
shipmentCode: this.serviceType[i].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
} else if (this.serviceType[i].shipmentCode == "FTL") {
let fetchArrayForFTLPack = this.servicePackageTypeFetched.filter(
(data) => data.shippingModeId == this.serviceType[i].services_id
);
if (fetchArrayForFTLPack.length > 0) {
fetchArrayForFTLPack[0].shipmentTypeDetails.map((data) => {
let objForPackages = {
package_id: data.shipmentTypeAssocId,
packages: `${data.shipmentType} ($
{this.serviceType[i].shipmentCode})`,
shipmentCode: this.serviceType[i].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
} else {
let fetchArrayForOtherPack = this.servicePackageTypeFetched.filter(
(data) => data.shippingModeId == this.serviceType[i].services_id
);
if (fetchArrayForOtherPack.length > 0) {
fetchArrayForOtherPack[0].packagingTypeDetails.map((data) => {
let objForPackages = {
package_id: data.packagingId,
packages: `${data.packagingName} ($
{this.serviceType[i].shipmentCode})`,
shipmentCode: this.serviceType[i].shipmentCode,
};
this.packageType.push(objForPackages);
});
}
}
this.selectedServices.push(this.serviceType[i]);
}

this.packageType.map((element, index) => {

if (
element.shipmentCode ===
this.selectedServices[this.selectedServices.length - 1].shipmentCode
) {
this.selectedPackages.push(element);
}
});
} else if (type == "pac") {
let alreadyContainedPac = this.selectedPackages.filter(
(data) =>
 data.package_id == this.packageType[i].package_id &&
data.shipmentCode == this.packageType[i].shipmentCode
);
if (alreadyContainedPac.length > 0) {
return;
} else {
this.selectedPackages.push(this.packageType[i]);
}
}

// else if(type=='pac'){

// }
this.serviceSelectionError = false;
}

removeAccessoialPackageAndServices(i, type) {
if (type == "acc") {
this.selectedAccessorial = this.selectedAccessorial.filter(
(data, index) => index !== i
);
} else if (type == "ser") {
this.packageType = this.packageType.filter(
(data) => data.shipmentCode !== this.selectedServices[i].shipmentCode
);
this.selectedPackages = this.selectedPackages.filter(
(data, index) =>
data.shipmentCode !== this.selectedServices[i].shipmentCode
);
this.selectedServices = this.selectedServices.filter(
(data, index) => index !== i
);
if (this.selectedServices.length === 0) {
this.serviceSelectionError = true;
}
} else if (type == "pac") {
this.selectedPackages = this.selectedPackages.filter(
(data, index) => index !== i
);
}
}

// End Default accessorial section functions ********************

******************** ******************** ******************** ********************

// Order entry functions ******************** ********************

******************** ******************** ********************
shipperNameInShipperEntry: string = "";
shipperNameInOrderEntry() {
if (this.shipperForm.get("shipperName").value != "") {
this.shipperNameInShipperEntry = "manual";
} else {
this.shipperNameInShipperEntry = "";
}
}

setDataFromGoogleLocationOrErrorForShipper() {
if (this.shipperForm.get("shipperName").value === "") {
if (
 this.shipperDataFromGoogleApiLocation.sourceAddress.companyName !==
"" &&
this.shipperNameInShipperEntry !== "manual"
) {
this.shipperForm.patchValue({
shipperName:
this.shipperDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
} else {
if (
this.shipperNameInShipperEntry !== "manual" &&
this.shipperForm.get("shipperName").value !== ""
) {
this.shipperForm.patchValue({
shipperName:
this.shipperDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
}
this.shipperForm.patchValue({
// shipperName:
this.shipperDataFromGoogleApiLocation.sourceAddress.companyName,
addressLine1Shipper:
this.shipperDataFromGoogleApiLocation.sourceAddress.fullAddr,
// addressLine2Shipper:
this.shipperDataFromGoogleApiLocation.sourceAddress.addrLine1,
countryShipper:
this.shipperDataFromGoogleApiLocation.sourceAddress.country,
firstName: this.shipperDataFromGoogleApiLocation.sourceAddress.firstName,
lastName: this.shipperDataFromGoogleApiLocation.sourceAddress.lastName,
cityShipper: this.shipperDataFromGoogleApiLocation.sourceAddress.city,
stateShipper: this.shipperDataFromGoogleApiLocation.sourceAddress.state,
postalCodeShipper:
this.shipperDataFromGoogleApiLocation.sourceAddress.zipCode,
// phoneNoCode: this.shipperDataFromGoogleApiLocation.sourceAddress.country,
latitude: this.shipperDataFromGoogleApiLocation.sourceAddress.latitude,
longitude: this.shipperDataFromGoogleApiLocation.sourceAddress.longitude,
});

if (
(this.shipperDataFromGoogleApiLocation.sourceAddress.addrLine1.length ==
0 &&
this.shipperDataFromGoogleApiLocation.sourceAddress.addrLine2.length ==
0) ||
this.shipperDataFromGoogleApiLocation.sourceAddress.country.length == 0 ||
this.shipperDataFromGoogleApiLocation.sourceAddress.city.length == 0 ||
this.shipperDataFromGoogleApiLocation.sourceAddress.state.length == 0 ||
this.shipperDataFromGoogleApiLocation.sourceAddress.zipCode.length == 0
) {
this.showErrorGoogleMapShipper = true;
} else {
this.showErrorGoogleMapShipper = false;
}
}
consigneeNameIsManualOrNot: string = "";
consigneeNameInOrderEntry() {
if (this.consigneeForm.get("consigneeName").value != "") {
this.consigneeNameIsManualOrNot = "manual";
 } else {
this.consigneeNameIsManualOrNot = "";
}
}
setDataFromGoogleLocationOrErrorForConsignee() {
if (this.consigneeForm.get("consigneeName").value === "") {
if (
this.consigneeDataFromGoogleApiLocation.sourceAddress.companyName !==
"" &&
this.consigneeNameIsManualOrNot !== "manual"
) {
this.consigneeForm.patchValue({
consigneeName:
this.consigneeDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
} else {
if (
this.consigneeNameIsManualOrNot !== "manual" &&
this.consigneeForm.get("consigneeName").value !== ""
) {
this.consigneeForm.patchValue({
consigneeName:
this.consigneeDataFromGoogleApiLocation.sourceAddress.companyName,
});
}
}
this.consigneeForm.patchValue({
// consigneeName:
this.consigneeDataFromGoogleApiLocation.sourceAddress.companyName,
addressLine1Consignee:
this.consigneeDataFromGoogleApiLocation.sourceAddress.fullAddr,
// addressLine2Consignee:
this.consigneeDataFromGoogleApiLocation.sourceAddress.addrLine1,
lastName: this.consigneeDataFromGoogleApiLocation.sourceAddress.lastName,
firstName:
this.consigneeDataFromGoogleApiLocation.sourceAddress.firstName,
countryConsignee:
this.consigneeDataFromGoogleApiLocation.sourceAddress.country,
cityConsignee: this.consigneeDataFromGoogleApiLocation.sourceAddress.city,
stateConsignee:
this.consigneeDataFromGoogleApiLocation.sourceAddress.state,
postalCodeConsignee:
this.consigneeDataFromGoogleApiLocation.sourceAddress.zipCode,
// phoneNoCode: this.consigneeDataFromGoogleApiLocation.sourceAddress.country
});

if (
(this.consigneeDataFromGoogleApiLocation.sourceAddress.addrLine1.length ==
0 &&
this.consigneeDataFromGoogleApiLocation.sourceAddress.addrLine2
.length == 0) ||
this.consigneeDataFromGoogleApiLocation.sourceAddress.country.length ==
0 ||
this.consigneeDataFromGoogleApiLocation.sourceAddress.city.length == 0 ||
this.consigneeDataFromGoogleApiLocation.sourceAddress.state.length == 0 ||
this.consigneeDataFromGoogleApiLocation.sourceAddress.zipCode.length == 0
) {
this.showErrorGoogleMapConsignee = true;
 } else {
this.showErrorGoogleMapConsignee = false;
}
}

getAddressBookData(i, perPage, searchKey, unique, valueFor): any {

let url =
ServerURLS.getAddressBookData.action +
"/" +
i +
"/" +
perPage +
"?searchKey=" +
searchKey +
"&uniqueCompany=" +
unique;

if (valueFor == "shipper") {
this.shipperSerachText = "Loading....";
} else if (valueFor == "consignee") {
this.consigneeSearchText = "Loading....";
}

let promiseForAdd = this.scHttpService.getHttpService(url, "");

promiseForAdd
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
if (valueFor == "shipper") {
if (res.response.length > 0) {
this.shipperSerachText = "Select one";
} else {
this.shipperSerachText = "No record found";
}
this.shipperAddressBookData = res.response;
} else if (valueFor == "consignee") {
if (res.response.length > 0) {
this.consigneeSearchText = "Select one";
} else {
this.consigneeSearchText = "No record found";
}
this.consigneeAddressBookData = res.response;
}
})
.catch((err) => {
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
}

setDataFromAddressBook(e, valueFor) {
 this.getAddressBookData(0, 10, e.target.value, true, valueFor);
}

setFetchedDataAddress(e, dataFor) {
if (dataFor == "shipper") {
this.shipperFromDDselected = true;
let obj = this.shipperDrpdwn.find((obj) => obj.addressId === e);
console.log(obj, this.shipperForm);
this.selectedFromDrpDwnshipper = obj;

this.dropdownForShipper = obj;
this.shipperForm.patchValue({
selectShipper: obj.addressId,
shipperName: obj.company,
addressLine1Shipper: obj.addrLine1,
addressLine2Shipper: obj.addrLine2,
cityShipper: obj.city,
stateShipper: obj.state,
postalCodeShipper: obj.zipCode,
countryShipper: obj.country,
phoneNoCode: obj.country,
firstName: obj.primaryContactInfo.firstName,
lastName: obj.primaryContactInfo.lastName,
phoneNoShipper: obj.primaryContactInfo.phoneNumber,
emailShipper: obj.primaryContactInfo.email,
primaryContactInfo: {
country: obj.primaryContactInfo.country,
email: obj.primaryContactInfo.email,
firstName: obj.primaryContactInfo.firstName,
lastName: obj.primaryContactInfo.lastName,
phoneExt: obj.primaryContactInfo.phoneExt,
phoneNumber: obj.primaryContactInfo.phoneNumber,
},
});
} else if (dataFor == "consignee") {
this.consigneeFromDDselected = true;
console.log(this.consigneeForm);
let obj = this.consigneeDrpdwn.find((obj) => obj.addressId === e);
console.log(this.consigneeForm, obj);
this.dropdownForConsignee = obj;
this.consigneeForm.patchValue({
selectConsignee: obj.addressId,
consigneeName: obj.company,
addressLine1Consignee: obj.addrLine1,
addressLine2Consignee: obj.addrLine2,
cityConsignee: obj.city,
stateConsignee: obj.state,
postalCodeConsignee: obj.zipCode,
countryConsignee: obj.country,
phoneNoCode: obj.country,
phoneExtConsignee: obj.primaryContactInfo.phoneExt,
firstName: obj.primaryContactInfo.firstName,
lastName: obj.primaryContactInfo.lastName,
phoneNoConsignee: obj.primaryContactInfo.phoneNumber,
emailConsignee: obj.primaryContactInfo.email,
primaryContactInfo: {
country: obj.primaryContactInfo.country,
email: obj.primaryContactInfo.email,
firstName: obj.primaryContactInfo.firstName,
 lastName: obj.primaryContactInfo.lastName,
phoneExt: obj.primaryContactInfo.phoneExt,
phoneNumber: obj.primaryContactInfo.phoneNumber,
},
});
} else {
let dataToPatch = this.consigneeAddressBookData.filter(
(data) => data.contactId == e
);
let phone = "";
if (dataToPatch[0].phone.includes("+91")) {
phone = dataToPatch[0].phone.slice(3, dataToPatch[0].phone.length);
} else {
phone = dataToPatch[0].phone.slice(2, dataToPatch[0].phone.length);
}

this.consigneeForm.patchValue({
selectShipper: dataToPatch[0].contactId,
consigneeName: dataToPatch[0].companyName,
firstName: dataToPatch[0].firstName,
lastName: dataToPatch[0].lastName,
addressLine1Consignee: dataToPatch[0].fullAddress,
addressLine2Consignee: dataToPatch[0].streetLine1,
cityConsignee: dataToPatch[0].city,
stateConsignee: dataToPatch[0].province,
postalCodeConsignee: dataToPatch[0].zipcode,
countryConsignee: dataToPatch[0].country,
emailConsignee: dataToPatch[0].email,
phoneNoConsignee: phone,
phoneExtConsignee: dataToPatch[0].extension,
phoneNoCode: dataToPatch[0].country,
primaryContactInfo: {
country: dataToPatch[0].primaryContactInfo.country,
email: dataToPatch[0].primaryContactInfo.email,
firstName: dataToPatch[0].primaryContactInfo.firstName,
lastName: dataToPatch[0].primaryContactInfo.lastName,
phoneExt: dataToPatch[0].primaryContactInfo.phoneExt,
phoneNumber: dataToPatch[0].primaryContactInfo.phoneNumber,
},
});
}
}

// End Order entry functions ******************** ********************

******************** ******************** ******************** ****
******************** ******************** ********************

messageSource: any;
currentMessage: any;
createUpdateCustomer(formData, type) {
let url = ServerURLS.createUpdateCustomer.action;
let promise = this.scHttpService.postFileHttpService(url, formData);
// this.modalService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' })
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.modalService.dismissAll();
 this.toastr.success(
`${
res.message
? res.message
: type == "create"
? "customer created successfully"
: "customer updated successfully"
}`,
"",
{
timeOut: 3000,
}
);
// if(this.isremoveShipper || this.isremoveConsignee){
// location.reload();
// }

if (type == "create") {
sessionStorage.setItem("_admincustomerId", res.customerId);
this.commenService.customerId = res.customerId;
this.router.navigateByUrl(
"shipcarte/customer/list/generalDetail/edit"
);
} else {
this.sharedData.customerStatus = res["Account Status"];
this.sharedData.customerName = JSON.parse(
formData.getAll("createRequest")
).general_details.customer_name;
this.listDataService.removeAllDataOfCustomersList();
this.fetchCustomerDetailsData();
// let urlArray = window.location.href.split('/');
// if (urlArray[urlArray.length - 1] == 'edit') {
//
this.router.navigateByUrl('shipcarte/customer/list/generalDetail/edit')
// }
// else {
//
this.router.navigateByUrl('shipcarte/customer/list/generalDetail/edit')
// }
}
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${err.message ? err.message : "Something went wrong"}`
);
});
}

saveGeneralDetails() {
if (!this.customerForm.valid) {
this.submitClicked = true;
this.logValidationErrors();
this.toastr.error(
"Please fill all the required feilds in general details section ",
"",
{
timeOut: 3000,
}
 );
return;
}

if (!this.accAndPickupDeliveryForm.valid) {
this.toastr.error("Instruction limit exceeds", "", {
timeOut: 3000,
});
return;
}

if (!this.shipperForm.valid) {
this.submitClicked = true;
this.logValidationErrorsShipper();
this.toastr.error(
"Please fill all the required feilds in shipper section ",
"",
{
timeOut: 3000,
}
);
return;
}

if (!this.consigneeForm.valid) {
this.submitClicked = true;
this.logValidationErrorsConsignee();
this.toastr.error(
"Please fill all the required feilds in Consignee section ",
"",
{
timeOut: 3000,
}
);
return;
}

let businessName = this.accAndPickupDeliveryForm.get("bStatus").value;

if (!businessName) {
this.businessSelectionError = true;
this.toastr.error("Please Select the business type", "", {
timeOut: 3000,
});
return;
} else {
this.businessSelectionError = false;
}

let shipperAddressObj = {
addressType: "SHPR",
addrLine1: this.shipperForm.get("addressLine1Shipper").value,
addrLine2: this.shipperForm.get("addressLine2Shipper").value,
fullAddr: this.shipperForm.get("addressLine1Shipper").value,
city: this.shipperForm.get("cityShipper").value,
state: this.shipperForm.get("stateShipper").value,
country: this.shipperForm.get("countryShipper").value,
zipCode: this.shipperForm.get("postalCodeShipper").value,
company: this.shipperForm.get("shipperName").value,
 firstName: this.shipperForm.get("firstName").value,
lastName: this.shipperForm.get("lastName").value,
email: this.shipperForm.get("emailShipper").value,
phoneNumber: this.shipperForm.get("phoneNoShipper").value,
phoneNumberExt: this.shipperForm.get("phoneExtShipper").value,
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.shipperForm.get("countryShipper").value,
email: this.shipperForm.get("emailShipper").value,
firstName: this.shipperForm.get("firstName").value,
lastName: this.shipperForm.get("lastName").value,
phoneExt: this.shipperForm.get("phoneExtShipper").value,
phoneNumber: this.shipperForm.get("phoneNoShipper").value,
},
};

let consigneeAddressObj = {
addressType: "CNSE",
addrLine1: this.consigneeForm.get("addressLine1Consignee").value,
addrLine2: this.consigneeForm.get("addressLine2Consignee").value,
fullAddr: this.consigneeForm.get("addressLine1Consignee").value,
city: this.consigneeForm.get("cityConsignee").value,
state: this.consigneeForm.get("stateConsignee").value,
country: this.consigneeForm.get("countryConsignee").value,
zipCode: this.consigneeForm.get("postalCodeConsignee").value,
company: this.consigneeForm.get("consigneeName").value,
firstName: this.consigneeForm.get("firstName").value,
lastName: this.consigneeForm.get("lastName").value,
email: this.consigneeForm.get("emailConsignee").value,
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value,
phoneNumberExt: this.consigneeForm.get("phoneExtConsignee").value,
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInConsignee != "" ? this.gMapIdInConsignee : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.consigneeForm.get("countryConsignee").value,
email: this.consigneeForm.get("emailConsignee").value,
firstName: this.consigneeForm.get("firstName").value,
lastName: this.consigneeForm.get("lastName").value,
phoneExt: this.consigneeForm.get("phoneExtConsignee").value,
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value,
},
};

let arrayForContactInfo = [];

let arrayForPaymentInfo = [];
let arrayForAccessorial = [];
let arrayForServices = [];
let arrayForPackages = [];

this.contactInfromationList.map((data) => {
let objForContactInfo = {
first_name: data.first_name,
last_name: data.last_name,
title: data.title,
 email_address: data.email,
is_primary_contact: data.is_primary_contact,
phone_number: data.phone,
phone_ext: data.phone_ext,
mobile_number: data.mobile_number,
is_email_sms_notif_require: data.is_email_sms_notif_require,
status: data.status,
country_code: data.country_code,
};
arrayForContactInfo.push(objForContactInfo);
});

this.billingLocationList.map((data) => {
let objForBillingInfo = {
title: data.title,
company_name: data.company_name,
address_line1: data.address_line1,
address_line2: data.address_line2,
contact_name: data.contact_name,
city: data.city,
zip_code: data.zip_code,
state: data.state,
country: data.country,
email_adress: data.email_adress,
phone_number: data.phone_number.toString(),
attention: data.attention,
fax: data.fax,
// Below is the fixed code for google manual toggle
google_map_id: data.google_map_id,
fax_prefix: data.fax_prefix,
is_default_payment_location: data.is_default_payment_location,
status: data.status == "true" ? true : false,
};
arrayForPaymentInfo.push(objForBillingInfo);
});

this.selectedAccessorial.map((data) => {
let obj = {
accessorial_id: data.servIceId,
};
arrayForAccessorial.push(obj);
});

this.selectedServices.map((data) => {
let obj = {
service_name: data.services,
services_id: data.services_id,
};
arrayForServices.push(obj);
});

this.selectedPackages.map((data) => {
let arr = this.servicePackageTypeFetched.filter(
(serviceData) => serviceData.shipmentCode == data.shipmentCode
);
let obj = {
package_id: data.package_id,
package_name: data.packages,
service_id: arr[0].shippingModeId,
 };
arrayForPackages.push(obj);
});
if (arrayForServices.length === 0) {
this.serviceSelectionError = true;

this.toastr.error("Please Select the service");

return;
} else {
this.serviceSelectionError = false;
}
let generalDetalObj = {
customer_name: this.customerForm.get("customerName").value
? this.customerForm.get("customerName").value
: "",
email_address: this.customerForm.get("email").value
? this.customerForm.get("email").value
: "",
address_line1: this.customerForm.get("addressLine1").value
? this.customerForm.get("addressLine1").value
: "",
address_line2: this.customerForm.get("addressLine2").value
? this.customerForm.get("addressLine2").value
: "",
website: this.customerForm.get("website").value
? this.customerForm.get("website").value
: "",
contact_name: this.customerForm.get("contactName").value
? this.customerForm.get("contactName").value
: "",
position: this.customerForm.get("position").value
? this.customerForm.get("position").value
: "",
city: this.customerForm.get("city").value
? this.customerForm.get("city").value
: "",
state: this.customerForm.get("state").value
? this.customerForm.get("state").value
: "",
phone_number: this.customerForm.get("phoneNo").value
? this.customerForm.get("phoneNo").value
: "",
phone_ext: this.customerForm.get("phoneExt").value
? this.customerForm.get("phoneExt").value
: "",
postal_code: this.customerForm.get("postalCode").value
? this.customerForm.get("postalCode").value
: "",
country: this.customerForm.get("country").value
? this.customerForm.get("country").value
: "",
mobile_number: this.customerForm.get("mobileNo").value
? this.customerForm.get("mobileNo").value
: "",
mobile_ext: this.customerForm.get("mobileExt").value
? this.customerForm.get("mobileExt").value
: "",
// status: this.customerForm.get('status').value ?
this.customerForm.get('status').value : 'inactive',
 is_email_notif_require: this.customerForm.get("emailNotification").value
? this.customerForm.get("emailNotification").value
: false,
default_category: this.orderEntryForm.get("orderCategory").value,
is_po_required: this.orderEntryForm.get("poRequired").value,
g_map_id: this.customerForm.get("gmapId").value
? this.customerForm.get("gmapId").value
: "",
is_haz_mat: this.orderEntryForm.get("asHasMat").value,
};

let tempObj = {
general_details: generalDetalObj,
contact_information: arrayForContactInfo,
payment_location: arrayForPaymentInfo,
business_type_id: this.accAndPickupDeliveryForm.get("bStatus").value,
accessorials_type: arrayForAccessorial,
services_type: arrayForServices,
package_type: arrayForPackages,
instruction: {
pickup: this.accAndPickupDeliveryForm.get("pickInst").value
? this.accAndPickupDeliveryForm.get("pickInst").value
: "",
delivery: this.accAndPickupDeliveryForm.get("delInst").value
? this.accAndPickupDeliveryForm.get("delInst").value
: "",
accessorial_note: this.accAndPickupDeliveryForm.get("aNotes").value
? this.accAndPickupDeliveryForm.get("aNotes").value
: "",
},
shipper_addr: shipperAddressObj,
consignee_addr: consigneeAddressObj,
};

const formdata: FormData = new FormData();

formdata.append("createRequest", JSON.stringify(tempObj));
if (this.imageData) {
formdata.append("customerImage", this.imageData);
}
this.createUpdateCustomer(formdata, "create");
}

updateCustomer() {
if (!this.customerForm.valid) {
this.submitClicked = true;

this.logValidationErrors();
this.toastr.error(
"Please fill all the required feilds in general details section ",
"",
{
timeOut: 3000,
}
);
return;
}

if (!this.accAndPickupDeliveryForm.valid) {
this.toastr.error("Instruction limit exceeds", "", {
 timeOut: 3000,
});
return;
}

if (!this.shipperForm.valid) {
this.submitClicked = true;
this.logValidationErrorsShipper();
this.toastr.error(
"Please fill all the required feilds in shipper section ",
"",
{
timeOut: 3000,
}
);
return;
}

if (!this.consigneeForm.valid) {
this.submitClicked = true;
this.logValidationErrorsConsignee();
this.toastr.error(
"Please fill all the required feilds in Consignee section ",
"",
{
timeOut: 3000,
}
);
return;
}
let businessName = this.accAndPickupDeliveryForm.get("bStatus").value;

if (!this.accAndPickupDeliveryForm.valid) {
this.businessSelectionError = true;

this.toastr.error("Please fill the required the fields", "", {

timeOut: 3000,
});
return;
} else {
this.businessSelectionError = false;
}
let generalDetalObj = {
customer_id: this.customerData.general_details.customer_id,
customer_name: this.customerForm.get("customerName").value
? this.customerForm.get("customerName").value
: "",
email_address: this.customerForm.get("email").value
? this.customerForm.get("email").value
: "",
address_line1: this.customerForm.get("addressLine1").value
? this.customerForm.get("addressLine1").value
: "",
address_line2: this.customerForm.get("addressLine2").value
? this.customerForm.get("addressLine2").value
: "",
website: this.customerForm.get("website").value
? this.customerForm.get("website").value
: "",
 contact_name: this.customerForm.get("contactName").value
? this.customerForm.get("contactName").value
: "",
position: this.customerForm.get("position").value
? this.customerForm.get("position").value
: "",
city: this.customerForm.get("city").value
? this.customerForm.get("city").value
: "",
state: this.customerForm.get("state").value
? this.customerForm.get("state").value
: "",
phone_number: this.customerForm.get("phoneNo").value
? this.customerForm.get("phoneNo").value
: "",
phone_ext: this.customerForm.get("phoneExt").value
? this.customerForm.get("phoneExt").value
: "",
postal_code: this.customerForm.get("postalCode").value
? this.customerForm.get("postalCode").value
: "",
country: this.customerForm.get("country").value
? this.customerForm.get("country").value
: "",
mobile_number: this.customerForm.get("mobileNo").value
? this.customerForm.get("mobileNo").value
: "",
mobile_ext: this.customerForm.get("mobileExt").value
? this.customerForm.get("mobileExt").value
: "",
// status: this.customerForm.get('status').value ?
this.customerForm.get('status').value : 'inactive',
is_email_notif_require: this.customerForm.get("emailNotification").value
? this.customerForm.get("emailNotification").value
: false,
default_category: this.orderEntryForm.get("orderCategory").value,
g_map_id: this.customerForm.get("gmapId").value
? this.customerForm.get("gmapId").value
: this.fetchedGmapId,
is_po_required: this.orderEntryForm.get("poRequired").value,
is_haz_mat: this.orderEntryForm.get("asHasMat").value,
};
if (
this.uploadImageShow == "" &&
this.customerData.general_details.image_download_url !== "NA" &&
this.customerData.general_details.image_download_url.length > 0
) {
generalDetalObj["image_id"] = "NA";
}

// if(!this.imageData && this.uploadImageShow!==null && this.uploadImageShow!

=="NA"){
//
generalDetalObj["image_download_url"]=this.customerData.general_details.image_downl
oad_url
// }
let shipperAddressObj = {};
let consigneeAddressObj = {};
if (
 this.customerData.shipper_addr &&
this.customerData.shipper_addr.addressMapId
) {
if (this.isremoveShipper) {
shipperAddressObj = {
addressType: "SHPR",
addressMapId: this.customerData.shipper_addr.addressMapId,
addressId: this.customerData.shipper_addr.addressId,
addrLine1: this.forforShipperCopy.get("addressLine1Shipper").value
? this.forforShipperCopy.get("addressLine1Shipper").value
: "",
addrLine2: this.forforShipperCopy.get("addressLine2Shipper").value
? this.forforShipperCopy.get("addressLine2Shipper").value
: "",
fullAddr: this.forforShipperCopy.get("addressLine1Shipper").value
? this.forforShipperCopy.get("addressLine1Shipper").value
: "",
city: this.forforShipperCopy.get("cityShipper").value
? this.forforShipperCopy.get("cityShipper").value
: "",
state: this.forforShipperCopy.get("stateShipper").value
? this.forforShipperCopy.get("stateShipper").value
: "",
country: this.forforShipperCopy.get("countryShipper").value
? this.forforShipperCopy.get("countryShipper").value
: "",
zipCode: this.forforShipperCopy.get("postalCodeShipper").value
? this.forforShipperCopy.get("postalCodeShipper").value
: "",
company: this.forforShipperCopy.get("shipperName").value
? this.forforShipperCopy.get("shipperName").value
: "",
firstName: this.forforShipperCopy.get("firstName").value
? this.forforShipperCopy.get("firstName").value
: "",
lastName: this.forforShipperCopy.get("lastName").value
? this.forforShipperCopy.get("lastName").value
: "",
email: this.forforShipperCopy.get("emailShipper").value
? this.forforShipperCopy.get("emailShipper").value
: "",
phoneNumber: this.forforShipperCopy.get("phoneNoShipper").value
? this.forforShipperCopy.get("phoneNoShipper").value
: "",
phoneNumberExt: this.forforShipperCopy.get("phoneExtShipper").value
? this.forforShipperCopy.get("phoneExtShipper").value
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.forforShipperCopy.get("phoneNoCode").value
? this.forforShipperCopy.get("phoneNoCode").value
: "",
email: this.forforShipperCopy.get("emailShipper").value
? this.forforShipperCopy.get("emailShipper").value
: "",
firstName: this.forforShipperCopy.get("firstName").value
 ? this.forforShipperCopy.get("firstName").value
: "",
lastName: this.forforShipperCopy.get("lastName").value
? this.forforShipperCopy.get("lastName").value
: "",
phoneExt: this.forforShipperCopy.get("phoneExtShipper").value
? this.forforShipperCopy.get("phoneExtShipper").value
: "",
phoneNumber: this.forforShipperCopy.get("phoneNoShipper").value
? this.forforShipperCopy.get("phoneNoShipper").value
: "",
},
};
} else {
shipperAddressObj = {
addressMapId: !this.shipperFromDDselected
? this.customerData.shipper_addr.addressMapId
: this.selectedFromDrpDwnshipper.addressMapId,
addressId: !this.shipperFromDDselected
? this.customerData.shipper_addr.addressId
: this.selectedFromDrpDwnshipper.addressId,
addressType: "SHPR",
addrLine1: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
addrLine2: this.shipperForm.get("addressLine2Shipper").value
? this.shipperForm.get("addressLine2Shipper").value
: "",
fullAddr: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
city: this.shipperForm.get("cityShipper").value
? this.shipperForm.get("cityShipper").value
: "",
state: this.shipperForm.get("stateShipper").value
? this.shipperForm.get("stateShipper").value
: "",
country: this.shipperForm.get("countryShipper").value
? this.shipperForm.get("countryShipper").value
: "",
zipCode: this.shipperForm.get("postalCodeShipper").value
? this.shipperForm.get("postalCodeShipper").value
: "",
company: this.shipperForm.get("shipperName").value
? this.shipperForm.get("shipperName").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
phoneNumberExt: this.shipperForm.get("phoneExtShipper").value
 ? this.shipperForm.get("phoneExtShipper").value
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.shipperForm.get("phoneNoCode").value
? this.shipperForm.get("phoneNoCode").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
phoneExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
},
};
}
} else {
if (!this.dropdownForShipper) {
if (
this.customerData.hasOwnProperty("addressId") &&
this.customerData.hasOwnProperty("addressMapId")
) {
shipperAddressObj = {
addressType: "SHPR",
addressMapId: this.customerData.hasOwnProperty("addressMapId")
? this.customerData.shipper_addr.addressMapId
: "",
addressId: this.customerData.hasOwnProperty("addressId")
? this.customerData.shipper_addr.addressId
: "",
addrLine1: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
addrLine2: this.shipperForm.get("addressLine2Shipper").value
? this.shipperForm.get("addressLine2Shipper").value
: "",
fullAddr: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
city: this.shipperForm.get("cityShipper").value
? this.shipperForm.get("cityShipper").value
: "",
state: this.shipperForm.get("stateShipper").value
? this.shipperForm.get("stateShipper").value
: "",
country: this.shipperForm.get("countryShipper").value
? this.shipperForm.get("countryShipper").value
 : "",
zipCode: this.shipperForm.get("postalCodeShipper").value
? this.shipperForm.get("postalCodeShipper").value
: "",
company: this.shipperForm.get("shipperName").value
? this.shipperForm.get("shipperName").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
phoneNumberExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.shipperForm.get("phoneNoCode").value
? this.shipperForm.get("phoneNoCode").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
phoneExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
},
};
} else {
shipperAddressObj = {
addressType: "SHPR",
addrLine1: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
addrLine2: this.shipperForm.get("addressLine2Shipper").value
? this.shipperForm.get("addressLine2Shipper").value
: "",
fullAddr: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
 city: this.shipperForm.get("cityShipper").value
? this.shipperForm.get("cityShipper").value
: "",
state: this.shipperForm.get("stateShipper").value
? this.shipperForm.get("stateShipper").value
: "",
country: this.shipperForm.get("countryShipper").value
? this.shipperForm.get("countryShipper").value
: "",
zipCode: this.shipperForm.get("postalCodeShipper").value
? this.shipperForm.get("postalCodeShipper").value
: "",
company: this.shipperForm.get("shipperName").value
? this.shipperForm.get("shipperName").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
phoneNumberExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.shipperForm.get("phoneNoCode").value
? this.shipperForm.get("phoneNoCode").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
phoneExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
},
};
}
} else {
if (this.isremoveShipper) {
shipperAddressObj = {
addressType: "SHPR",
addressMapId: this.dropdownForShipper.addressMapId
? this.dropdownForShipper.addressMapId
: "",
addressId: this.dropdownForShipper.addressId
? this.dropdownForShipper.addressId
: "",
addrLine1: this.forforShipperCopy.get("addressLine1Shipper").value
? this.forforShipperCopy.get("addressLine1Shipper").value
: "",
addrLine2: this.forforShipperCopy.get("addressLine2Shipper").value
? this.forforShipperCopy.get("addressLine2Shipper").value
: "",
fullAddr: this.forforShipperCopy.get("addressLine1Shipper").value
? this.forforShipperCopy.get("addressLine1Shipper").value
: "",
city: this.forforShipperCopy.get("cityShipper").value
? this.forforShipperCopy.get("cityShipper").value
: "",
state: this.forforShipperCopy.get("stateShipper").value
? this.forforShipperCopy.get("stateShipper").value
: "",
country: this.forforShipperCopy.get("countryShipper").value
? this.forforShipperCopy.get("countryShipper").value
: "",
zipCode: this.forforShipperCopy.get("postalCodeShipper").value
? this.forforShipperCopy.get("postalCodeShipper").value
: "",
company: this.forforShipperCopy.get("shipperName").value
? this.forforShipperCopy.get("shipperName").value
: "",
firstName: this.forforShipperCopy.get("firstName").value
? this.forforShipperCopy.get("firstName").value
: "",
lastName: this.forforShipperCopy.get("lastName").value
? this.forforShipperCopy.get("lastName").value
: "",
email: this.forforShipperCopy.get("emailShipper").value
? this.forforShipperCopy.get("emailShipper").value
: "",
phoneNumber: this.forforShipperCopy.get("phoneNoShipper").value
? this.forforShipperCopy.get("phoneNoShipper").value
: "",
phoneNumberExt: this.forforShipperCopy.get("phoneExtShipper").value
? this.shipperFormDump.get("phoneExtShipper").value
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.forforShipperCopy.get("phoneNoCode").value
? this.forforShipperCopy.get("phoneNoCode").value
: "",
email: this.forforShipperCopy.get("emailShipper").value
? this.forforShipperCopy.get("emailShipper").value
: "",
firstName: this.forforShipperCopy.get("firstName").value
? this.forforShipperCopy.get("firstName").value
 : "",
lastName: this.forforShipperCopy.get("lastName").value
? this.forforShipperCopy.get("lastName").value
: "",
phoneExt: this.forforShipperCopy.get("phoneExtShipper").value
? this.forforShipperCopy.get("phoneExtShipper").value
: "",
phoneNumber: this.forforShipperCopy.get("phoneNoShipper").value
? this.forforShipperCopy.get("phoneNoShipper").value
: "",
},
};
} else {
shipperAddressObj = {
addressType: "SHPR",
addressMapId: this.dropdownForShipper.addressMapId
? this.dropdownForShipper.addressMapId
: "",
addressId: this.dropdownForShipper.addressId
? this.dropdownForShipper.addressId
: "",
addrLine1: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
addrLine2: this.shipperForm.get("addressLine2Shipper").value
? this.shipperForm.get("addressLine2Shipper").value
: "",
fullAddr: this.shipperForm.get("addressLine1Shipper").value
? this.shipperForm.get("addressLine1Shipper").value
: "",
city: this.shipperForm.get("cityShipper").value
? this.shipperForm.get("cityShipper").value
: "",
state: this.shipperForm.get("stateShipper").value
? this.shipperForm.get("stateShipper").value
: "",
country: this.shipperForm.get("countryShipper").value
? this.shipperForm.get("countryShipper").value
: "",
zipCode: this.shipperForm.get("postalCodeShipper").value
? this.shipperForm.get("postalCodeShipper").value
: "",
company: this.shipperForm.get("shipperName").value
? this.shipperForm.get("shipperName").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
phoneNumberExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
 : "",
// Below is the fixed code for google manual toggle
googleMapId: this.gMapIdInShipper != "" ? this.gMapIdInShipper : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.shipperForm.get("phoneNoCode").value
? this.shipperForm.get("phoneNoCode").value
: "",
email: this.shipperForm.get("emailShipper").value
? this.shipperForm.get("emailShipper").value
: "",
firstName: this.shipperForm.get("firstName").value
? this.shipperForm.get("firstName").value
: "",
lastName: this.shipperForm.get("lastName").value
? this.shipperForm.get("lastName").value
: "",
phoneExt: this.shipperForm.get("phoneExtShipper").value
? this.shipperForm.get("phoneExtShipper").value
: "",
phoneNumber: this.shipperForm.get("phoneNoShipper").value
? this.shipperForm.get("phoneNoShipper").value
: "",
},
};
}
}
}

if (
this.customerData.consignee_addr &&
this.customerData.consignee_addr.addressMapId
) {
if (this.isremoveConsignee) {
consigneeAddressObj = {
addressMapId: this.customerData.consignee_addr.addressMapId,
addressId: this.customerData.consignee_addr.addressId,
addressType: "CNSE",
addrLine1: this.forforConsigneeCopy.get("addressLine1Consignee").value
? this.forforConsigneeCopy.get("addressLine1Consignee").value
: "",
addrLine2: this.forforConsigneeCopy.get("addressLine2Consignee").value
? this.forforConsigneeCopy.get("addressLine2Consignee").value
: "",
fullAddr: this.forforConsigneeCopy.get("addressLine1Consignee").value
? this.forforConsigneeCopy.get("addressLine1Consignee").value
: "",
city: this.forforConsigneeCopy.get("cityConsignee").value
? this.forforConsigneeCopy.get("cityConsignee").value
: "",
state: this.forforConsigneeCopy.get("stateConsignee").value
? this.forforConsigneeCopy.get("stateConsignee").value
: "",
country: this.forforConsigneeCopy.get("countryConsignee").value
? this.forforConsigneeCopy.get("countryConsignee").value
: "",
zipCode: this.forforConsigneeCopy.get("postalCodeConsignee").value
? this.forforConsigneeCopy.get("postalCodeConsignee").value
 : "",
company: this.forforConsigneeCopy.get("consigneeName").value
? this.forforConsigneeCopy.get("consigneeName").value
: "",
firstName: this.forforConsigneeCopy.get("firstName").value
? this.forforConsigneeCopy.get("firstName").value
: "",
lastName: this.forforConsigneeCopy.get("lastName").value
? this.forforConsigneeCopy.get("lastName").value
: "",
email: this.forforConsigneeCopy.get("emailConsignee").value
? this.forforConsigneeCopy.get("emailConsignee").value
: "",
phoneNumber: this.forforConsigneeCopy.get("phoneNoConsignee").value
? this.forforConsigneeCopy.get("phoneNoConsignee").value
: "",
phoneNumberExt: this.forforConsigneeCopy.get("phoneExtConsignee")
.value
? this.forforConsigneeCopy.get("phoneExtConsignee").value
: "",
// Below is the fixed code for google manual toggle
googleMapId:
this.gMapIdInConsignee != "" ? this.gMapIdInConsignee : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.forforConsigneeCopy.get("phoneNoCode").value
? this.forforConsigneeCopy.get("phoneNoCode").value
: "",
email: this.forforConsigneeCopy.get("emailConsignee").value
? this.forforConsigneeCopy.get("emailConsignee").value
: "",
firstName: this.forforConsigneeCopy.get("firstName").value
? this.forforConsigneeCopy.get("firstName").value
: "",
lastName: this.forforConsigneeCopy.get("lastName").value
? this.forforConsigneeCopy.get("lastName").value
: "",
phoneExt: this.forforConsigneeCopy.get("phoneExtConsignee").value
? this.forforConsigneeCopy.get("phoneExtConsignee").value
: "",
phoneNumber: this.forforConsigneeCopy.get("phoneNoConsignee").value
? this.forforConsigneeCopy.get("phoneNoConsignee").value
: "",
},
};
} else {
consigneeAddressObj = {
addressMapId: this.consigneeFromDDselected
? this.dropdownForConsignee.addressMapId
: this.customerData.consignee_addr.addressMapId,
addressId: this.consigneeFromDDselected
? this.dropdownForConsignee.addressId
: this.customerData.consignee_addr.addressId,
addressType: "CNSE",
addrLine1: this.consigneeForm.get("addressLine1Consignee").value
? this.consigneeForm.get("addressLine1Consignee").value
: "",
addrLine2: this.consigneeForm.get("addressLine2Consignee").value
 ? this.consigneeForm.get("addressLine2Consignee").value
: "",
fullAddr: this.consigneeForm.get("addressLine1Consignee").value
? this.consigneeForm.get("addressLine1Consignee").value
: "",
city: this.consigneeForm.get("cityConsignee").value
? this.consigneeForm.get("cityConsignee").value
: "",
state: this.consigneeForm.get("stateConsignee").value
? this.consigneeForm.get("stateConsignee").value
: "",
country: this.consigneeForm.get("countryConsignee").value
? this.consigneeForm.get("countryConsignee").value
: "",
zipCode: this.consigneeForm.get("postalCodeConsignee").value
? this.consigneeForm.get("postalCodeConsignee").value
: "",
company: this.consigneeForm.get("consigneeName").value
? this.consigneeForm.get("consigneeName").value
: "",
firstName: this.consigneeForm.get("firstName").value
? this.consigneeForm.get("firstName").value
: "",
lastName: this.consigneeForm.get("lastName").value
? this.consigneeForm.get("lastName").value
: "",
email: this.consigneeForm.get("emailConsignee").value
? this.consigneeForm.get("emailConsignee").value
: "",
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value
? this.consigneeForm.get("phoneNoConsignee").value
: "",
phoneNumberExt: this.consigneeForm.get("phoneExtConsignee").value
? this.consigneeForm.get("phoneExtConsignee").value
: "",
// Below is the fixed code for google manual toggle
googleMapId:
this.gMapIdInConsignee != "" ? this.gMapIdInConsignee : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.consigneeForm.get("phoneNoCode").value
? this.consigneeForm.get("phoneNoCode").value
: "",
email: this.consigneeForm.get("emailConsignee").value
? this.consigneeForm.get("emailConsignee").value
: "",
firstName: this.consigneeForm.get("firstName").value
? this.consigneeForm.get("firstName").value
: "",
lastName: this.consigneeForm.get("lastName").value
? this.consigneeForm.get("lastName").value
: "",
phoneExt: this.consigneeForm.get("phoneExtConsignee").value
? this.consigneeForm.get("phoneExtConsignee").value
: "",
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value
? this.consigneeForm.get("phoneNoConsignee").value
: "",
 },
};
}
} else {
if (!this.dropdownForConsignee) {
consigneeAddressObj = {
addressType: "CNSE",
addrLine1: this.consigneeForm.get("addressLine1Consignee").value
? this.consigneeForm.get("addressLine1Consignee").value
: "",
addrLine2: this.consigneeForm.get("addressLine2Consignee").value
? this.consigneeForm.get("addressLine2Consignee").value
: "",
fullAddr: this.consigneeForm.get("addressLine1Consignee").value
? this.consigneeForm.get("addressLine1Consignee").value
: "",
city: this.consigneeForm.get("cityConsignee").value
? this.consigneeForm.get("cityConsignee").value
: "",
state: this.consigneeForm.get("stateConsignee").value
? this.consigneeForm.get("stateConsignee").value
: "",
country: this.consigneeForm.get("countryConsignee").value
? this.consigneeForm.get("countryConsignee").value
: "",
zipCode: this.consigneeForm.get("postalCodeConsignee").value
? this.consigneeForm.get("postalCodeConsignee").value
: "",
company: this.consigneeForm.get("consigneeName").value
? this.consigneeForm.get("consigneeName").value
: "",
firstName: this.consigneeForm.get("firstName").value
? this.consigneeForm.get("firstName").value
: "",
lastName: this.consigneeForm.get("lastName").value
? this.consigneeForm.get("lastName").value
: "",
email: this.consigneeForm.get("emailConsignee").value
? this.consigneeForm.get("emailConsignee").value
: "",
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value
? this.consigneeForm.get("phoneNoConsignee").value
: "",
phoneNumberExt: this.consigneeForm.get("phoneExtConsignee").value
? this.consigneeForm.get("phoneExtConsignee").value
: "",
// Below is the fixed code for google manual toggle
googleMapId:
this.gMapIdInConsignee != "" ? this.gMapIdInConsignee : "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.consigneeForm.get("phoneNoCode").value
? this.consigneeForm.get("phoneNoCode").value
: "",
email: this.consigneeForm.get("emailConsignee").value
? this.consigneeForm.get("emailConsignee").value
: "",
firstName: this.consigneeForm.get("firstName").value
 ? this.consigneeForm.get("firstName").value
: "",
lastName: this.consigneeForm.get("lastName").value
? this.consigneeForm.get("lastName").value
: "",
phoneExt: this.consigneeForm.get("phoneExtConsignee").value
? this.consigneeForm.get("phoneExtConsignee").value
: "",
phoneNumber: this.consigneeForm.get("phoneNoConsignee").value
? this.consigneeForm.get("phoneNoConsignee").value
: "",
},
};
} else {
consigneeAddressObj = {
addressType: "CNSE",
addressMapId: this.dropdownForConsignee.addressMapId
? this.dropdownForConsignee.addressMapId
: "",
addressId: this.dropdownForConsignee.addressId
? this.dropdownForConsignee.addressId
: "",
addrLine1: this.dropdownForConsignee.addrLine1
? this.dropdownForConsignee.addrLine1
: "",
addrLine2: this.dropdownForConsignee.addrLine2
? this.dropdownForConsignee.addrLine2
: "",
fullAddr: this.dropdownForConsignee.fullAddr
? this.dropdownForConsignee.fullAddr
: "",
city: this.dropdownForConsignee.city
? this.dropdownForConsignee.city
: "",
state: this.dropdownForConsignee.state
? this.dropdownForConsignee.state
: "",
country: this.dropdownForConsignee.country
? this.dropdownForConsignee.country
: "",
zipCode: this.dropdownForConsignee.zipCode
? this.dropdownForConsignee.zipCode
: "",
company: this.dropdownForConsignee.company
? this.dropdownForConsignee.company
: "",
firstName: this.dropdownForConsignee.firstName
? this.dropdownForConsignee.firstName
: "",
lastName: this.dropdownForConsignee.lastName
? this.dropdownForConsignee.lastName
: "",
email: this.dropdownForConsignee.email
? this.dropdownForConsignee.email
: "",
phoneNumber: this.dropdownForConsignee.phoneNumber
? this.dropdownForConsignee.phoneNumber
: "",
phoneNumberExt: this.dropdownForConsignee.phoneNumberExt
 ? this.dropdownForConsignee.phoneNumberExt
: "",
// Below is the fixed code for google manual toggle
googleMapId: this.dropdownForConsignee.googleMapId
? this.dropdownForConsignee.googleMapId
: "",

// Below object is used for primary contact

primaryContactInfo: {
country: this.dropdownForConsignee.primaryContactInfo.country
? this.dropdownForConsignee.primaryContactInfo.country
: "",
email: this.dropdownForConsignee.primaryContactInfo.email
? this.dropdownForConsignee.primaryContactInfo.email
: "",
firstName: this.consigneeForm.value.firstName,
lastName: this.consigneeForm.value.lastName,
phoneExt: this.dropdownForConsignee.primaryContactInfo.phoneExt
? this.dropdownForConsignee.primaryContactInfo.phoneExt
: "",
phoneNumber: this.dropdownForConsignee.primaryContactInfo
.phoneNumber
? this.dropdownForConsignee.primaryContactInfo.phoneNumber
: "",
},
};
}
}

let dataForAccessorial = [];

let arrayForContactInfo = [];
let arrayForPaymentInfo = [];
let dataForServices = [];
let dataForPackages = [];

// set data for accessorial *************** *************** ***************

*************** *************** *************** *************** ***************
***************

if (
this.customerData.accessorials_type &&
this.customerData.accessorials_type.length > 0
) {
this.customerData.accessorials_type.map((dataFetchedAccessorial) => {
let arrForRemovedAccessorial = this.selectedAccessorial.filter(
(data) => data.servIceId == dataFetchedAccessorial.accessorial_id
);
if (arrForRemovedAccessorial.length > 0) {
dataForAccessorial.push(dataFetchedAccessorial);
return;
} else {
let objForRemoveAccessorial = {
cust_accessorial_map_id:
dataFetchedAccessorial.cust_accessorial_map_id,
is_removed: true,
};
dataForAccessorial.push(objForRemoveAccessorial);
}
});
 }

this.selectedAccessorial.map((data) => {
let findDatainRemovedArray = dataForAccessorial.filter(
(dataRemov) =>
dataRemov.accessorial_id && dataRemov.accessorial_id == data.servIceId
);
if (findDatainRemovedArray.length > 0) {
return;
} else {
dataForAccessorial.push({ accessorial_id: data.servIceId });
}
});

// End set data for accessorial *************** ***************

*************** *************** *************** *************** ***************
*************** ***************

// set data for services *************** *************** ***************

*************** *************** *************** *************** ***************
***************

if (
this.customerData.services_type &&
this.customerData.services_type.length > 0
) {
this.customerData.services_type.map((data) => {
let dataFetchForRemoveCheck = this.selectedServices.filter(
(dataSelected) => dataSelected.services_id == data.services_id
);
if (dataFetchForRemoveCheck.length > 0) {
dataForServices.push({
...data,
service_name: dataFetchForRemoveCheck[0].services,
});
} else {
let objForRemoveAccessorial = {
cust_services_map_id: data.cust_services_map_id,
is_removed: true,
};
dataForServices.push(objForRemoveAccessorial);
}
});
}
this.selectedServices.map((data) => {
let findDatainRemovedArray = dataForServices.filter(
(dataRemov) =>
dataRemov.services_id && dataRemov.services_id == data.services_id
);
if (findDatainRemovedArray.length > 0) {
return;
} else {
dataForServices.push({
service_name: data.services,
services_id: data.services_id,
});
}
});
 // End data for services *************** *************** ***************
*************** *************** *************** *************** ***************

// data for packages *************** *************** ***************

*************** *************** *************** *************** ***************

if (
this.customerData.package_type &&
this.customerData.package_type.length > 0
) {
this.customerData.package_type.map((data) => {
let arrayForShipmentCodeMatch = this.servicePackageTypeFetched.filter(
(dataAllSer) => dataAllSer.shippingModeId == data.service_id
);

let dataFetchForRemoveCheck = this.selectedPackages.filter(

(dataForSelected) =>
dataForSelected.package_id == data.package_id &&
dataForSelected.shipmentCode ==
arrayForShipmentCodeMatch[0].shipmentCode
);
if (dataFetchForRemoveCheck.length > 0) {
let objForNotDeleted = {
cust_package_map_id: data.cust_package_map_id,
package_id: data.package_id,
service_id: data.service_id,
};
dataForPackages.push(objForNotDeleted);
} else {
let objForDelete = {
cust_package_map_id: data.cust_package_map_id,
is_removed: true,
};
dataForPackages.push(objForDelete);
}
});
}

this.selectedPackages.map((data) => {
let findDataForService = this.servicePackageTypeFetched.filter(
(dataSer) => data.shipmentCode == dataSer.shipmentCode
);
let findDatainRemovedArray = dataForPackages.filter(
(dataRemov) =>
dataRemov.package_id &&
dataRemov.package_id == data.package_id &&
findDataForService[0].shippingModeId == dataRemov.service_id
);
if (findDatainRemovedArray.length > 0) {
return;
} else {
let arrayForShipmentCodeMatch = this.servicePackageTypeFetched.filter(
(dataAllSer) => dataAllSer.shipmentCode == data.shipmentCode
);
dataForPackages.push({
package_id: data.package_id,
package_name: data.packages,
service_id: arrayForShipmentCodeMatch[0].shippingModeId,
});
 }
});

// End data for packages *************** *************** ***************

*************** *************** *************** *************** ***************

this.contactInfromationList.map((data) => {
let objForContactInfo = {
first_name: data.first_name,
last_name: data.last_name,
title: data.title,
email_address: data.email,
is_primary_contact: data.is_primary_contact,
phone_number: data.phone,
phone_ext: data.phone_ext,
mobile_number: data.mobile_number,
is_email_sms_notif_require: data.is_email_sms_notif_require,
status: data.status,
country_code: data.country_code,
};
if (data.contact_map_id !== "new") {
objForContactInfo["contact_map_id"] = data.contact_map_id;
}
arrayForContactInfo.push(objForContactInfo);
});

this.billingLocationList.map((data) => {
let objForBillingInfo = {
title: data.title,
company_name: data.company_name,
address_line1: data.address_line1,
address_line2: data.address_line2,
contact_name: data.contact_name,
city: data.city,
zip_code: data.zip_code,
state: data.state,
country: data.country,
email_adress: data.email_adress,
phone_number: data.phone_number.toString(),
attention: data.attention,
fax: data.fax,
google_map_id: data.google_map_id,

fax_prefix: data.fax_prefix,
is_default_payment_location: data.is_default_payment_location,
status: data.status == "true" ? true : false,
};
if (data.billing_id !== "new") {
objForBillingInfo["billing_address_id"] = data.billing_address_id;
objForBillingInfo["billing_id"] = data.billing_id;
}
arrayForPaymentInfo.push(objForBillingInfo);
});
if (dataForServices.length === 0) {
this.serviceSelectionError = true;
this.toastr.error("Please Select atleat one service", "", {
timeOut: 3000,
});
return;
} else {
this.serviceSelectionError = false;
}
let tempObj = {
general_details: generalDetalObj,
business_type_id: this.accAndPickupDeliveryForm.get("bStatus").value,
contact_information: arrayForContactInfo,
payment_location: arrayForPaymentInfo,
instruction: {
pickup: this.accAndPickupDeliveryForm.get("pickInst").value
? this.accAndPickupDeliveryForm.get("pickInst").value
: "",
delivery: this.accAndPickupDeliveryForm.get("delInst").value
? this.accAndPickupDeliveryForm.get("delInst").value
: "",
accessorial_note: this.accAndPickupDeliveryForm.get("aNotes").value
? this.accAndPickupDeliveryForm.get("aNotes").value
: "",
},
shipper_addr: shipperAddressObj,
consignee_addr: consigneeAddressObj,
};

if (dataForAccessorial.length > 0) {
tempObj["accessorials_type"] = dataForAccessorial;
}

if (dataForServices.length > 0) {
tempObj["services_type"] = dataForServices;
}

if (dataForPackages.length > 0) {
tempObj["package_type"] = dataForPackages;
}
const formdata: FormData = new FormData();
formdata.append("createRequest", JSON.stringify(tempObj));
if (this.imageData) {
formdata.append("customerImage", this.imageData);
}

this.createUpdateCustomer(formdata, "update");
if (this.isremoveShipper) {
this.commenService
.removeShipperConsigneeDetails(this.addrTypeShipper)
.subscribe((res: any) => {
if (res.data == "default address removed successfully") {
this.isremoveShipper = false;
this.commenService
.getShipperConsigneeDetails("SHPR")
.subscribe((res) => {
this.shipperDrpdwn = res;
});
}
});
}
if (this.isremoveConsignee) {
this.commenService
.removeShipperConsigneeDetails(this.addrTypeConsignee)
.subscribe((res: any) => {
 if (res.data == "default address removed successfully") {
this.isremoveConsignee = false;
this.commenService
.getShipperConsigneeDetails("CNSE")
.subscribe((res) => {
this.consigneeDrpdwn = res;
});
}
});
}
}

sort(property, factor) {
this.isDesc = !this.isDesc; //change the direction
let direction = this.isDesc ? 1 : -1;
if (factor == "contact") {
this.contactSortBy[property] = !this.isDesc ? "down" : "up";
this.contactInfromationList.sort(function (a, b) {
if (
a[property].toString().toLowerCase() <
b[property].toString().toLowerCase()
) {
return -1 * direction;
} else if (
a[property].toString().toLowerCase() >
b[property].toString().toLowerCase()
) {
return 1 * direction;
} else {
return 0;
}
});
} else if (factor == "billing") {
this.billingSortBy[property] = !this.isDesc ? "down" : "up";
this.billingLocationList.sort(function (a, b) {
if (
a[property].toString().toLowerCase() <
b[property].toString().toLowerCase()
) {
return -1 * direction;
} else if (
a[property].toString().toLowerCase() >
b[property].toString().toLowerCase()
) {
return 1 * direction;
} else {
return 0;
}
});
}
}
dataPresent: boolean = false;
dataPresentInBilling: boolean = false;
checkCompanyNameAndEmailAlreadyExistInContactInformation() {
this.dataPresent = false;
let nameFromInput =
(this.contactForm.get("fnameContact").value
? this.contactForm.get("fnameContact").value
: "") +
 " " +
(this.contactForm.get("lnameContact").value
? this.contactForm.get("lnameContact").value
: "");
let emailFromInput = this.contactForm.get("emailContact").value
? this.contactForm.get("emailContact").value
: "";
this.contactInfromationList.map((element, index) => {
let name = element.first_name + " " + element.last_name;
let email = element.email;
if (index != this.isContactEditId) {
if (name === nameFromInput && emailFromInput === email) {
this.dataPresent = true;
return;
}
}
});
}
isCompanyNameIsManualInBilling: string = "";
companyNameInBilling() {
if (this.paymentForm.get("nameBilling").value !== "") {
this.isCompanyNameIsManualInBilling = "manual";
} else {
this.isCompanyNameIsManualInBilling = "";
}
}
checkDataIsAlreadyPresentOrNot() {
this.dataPresentInBilling = false;
let nameFromInput = this.paymentForm.get("nameBilling").value
? this.paymentForm.get("nameBilling").value
: "";
let emailFromInput = this.paymentForm.get("emailBilling").value
? this.paymentForm.get("emailBilling").value
: "";
// if (nameFromInput !== '') {
// this.isCompanyNameIsManualInBilling = 'manual';
// } else {
// this.isCompanyNameIsManualInBilling = ''
// }
this.billingLocationList.map((element, index) => {
let name = element.company_name;
let email = element.email_adress;

if (index != this.billingRowEditId) {
if (name === nameFromInput && emailFromInput === email) {
this.dataPresentInBilling = true;
return;
}
}
});
}
redirectToCustomerList() {
this.router.navigateByUrl("shipcarte/customer/list");
}

ngOnDestroy(): void {
this.modalService.dismissAll();
this.customerDetailsBoolean = false;
}
}
..............
html:
<div>
<div id="consistentBodyAllComponent">
<!-- General details section
***********************************************************************************
*********************************** -->
<div class="cardStyle">
<div class="row" style="border-bottom: 1px solid #C4CDD5;">
<div class="col-md-9">
<h3 class="padding10vertical20Horizontal" style="font-weight: 500;
font-size: 22px;font-family: 'Poppins' !important; color: #354052!
important; margin-bottom: 0px; padding:13px 26px;"> General Details </h3>
</div>
<div class="col-md-3">
<h3 class="padding10vertical20Horizontal" style="font-weight: 500;
font-size: 22px;font-family: 'Poppins' !important; color: #354052!
important; margin-bottom: 0px; padding:13px 26px;">Customer Id :
{{customerData?.general_details?.custom_id?
customerData.general_details?.custom_id:'--'}} </h3>
</div>
</div>
<div>
<div style="padding: 0px 32px;">
<form [formGroup]="customerForm">
<div class="row" >
<div class="col-sm-12 col-lg-2 padding10">
<div class="row padding10" style="padding-left: 12px;">
<label style="color: #7F8FA4 !important; padding-left: 2pxm !
important;">Photo (Click to edit)</label>
</div>
<div class="imageDiv row">
<div class="imageDivInner">
<img *ngIf="!uploadImageShow" style="width: 65%;border-radius:
50%;" src="assets/img/avatar.png"
alt="">
<img *ngIf="uploadImageShow" style="width: 100%;height:
100%;object-fit: contain;"
[src]="uploadImageShow" alt="">
<i style="cursor: pointer;" class="fa fa-camera cam-icon
defaultCameraIcon"
(click)="fileInput.click()"></i>
<input #fileInput type="file" accept="image/*"
name="uploadImage" id="uploadImage"
(change)="uploadImage($event)" style="display:none;" />
</div>
</div>
<div *ngIf="uploadImageShow!=='NA' &&
uploadImageShow.toString().length > 0"
class="row displayFlexJustifyCenterRemoveImage" style="margin-
top: 5px;">
<label class="control-label formLabel" style="color: red !
important;cursor: pointer;"
(click)="removeImage()"> Remove Image</label>
</div>
<div style="padding:0 10px;margin-top:25px" class="row">
<div class="d-flex form-group mb-0">
<label class="switch">
 <input type="checkbox" formControlName="emailNotification">
<span style="margin-top: 3px;" class="slider round"></span>
</label>
<label for="emailNotification" class="control-label formLabel">
Email Notications
</label>
</div>
</div>
<!-- <div style="padding:0 10px;" class="row">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="status">Status <span
style="color:#F85359">*</span></label>
</div>
<div class="form-group">
<span class="rowSelect">

<ng-select class="business" id="status" [searchable]="true"

[clearable]="false" bindLabel="name"
placeholder="Select type" formControlName="status"
(blur)="logValidationErrors()">
<ng-option value="active">Active</ng-option>
<ng-option value="inactive">Inactive</ng-option>

</ng-select>

</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.status">
{{formErrors.status}}
</span>
</div>
</div>
</div> -->
</div>
<div class="col-sm-12 col-lg-8 padding10">
<div class="row" style="padding-top: 9px;">
<div class="col-sm-12 col-lg-6 padding10 resp">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="customerName">Customer Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="customerName" type="text" class="form-
control" (blur)="logValidationErrors()"
formControlName="customerName" placeholder="Enter
Customer Name"
(keyup)="customerNameType($event.target.value)">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.customerName">
{{formErrors.customerName}}
</span>
</div>
 </div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="displayFlexBetween">
<label class="control-label formLabel"
for="addressLine1">Address Line 1<span
style="color:#F85359">*</span></label>
<div class="d-flex aligin-items-center">
<label style="font-size: 14px !important;"
class="formLabel responsiveHide"> Google Maps
</label>
<img style="
height: 14px;
width: 14px;
margin-right: 4px;
margin-left: 1px;
margin-top: 3px;" src="assets/img/common/google-
maps.svg" alt="">
<div style="cursor: pointer;"
(click)="toggleManualLookUp('cur')">
<label style="width: 42px !important;pointer-
events: none" class="switch">
<input style="pointer-events: none "
type="checkbox" [checked]="isManualLookUp">
<span style="background-color: #2196f3 !
important;margin-top: 3px;margin-left: 3px;"
class="slider round"></span>
</label>
</div>
<label style="color: #7F8FA4 !important;font-size:
14px;" class="control-label">
Manual Lookup
</label>
</div>
</div>
<div class="customerInput">
<input *ngIf="!isManualLookUp" id="addressLine1" ngx-
google-places-autocomplete

(onAddressChange)="handleAddressChange($event,'general')" type="text" class="form-

control"
formControlName="addressLine1" placeholder="Search
Address"
(blur)="logValidationErrors()">

<input *ngIf="isManualLookUp" id="addressLine1"

type="text" class="form-control"
formControlName="addressLine1" placeholder="Enter
Address" (blur)="logValidationErrors()">

<span style="color:#FF0000;font-size: 12px;"

*ngIf="showErrorGoogleMap">
Please select more specific address! e.g. street,
route, city, state and country
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.addressLine1">
{{formErrors.addressLine1}}
 </span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="addressLine2">Address Line 2</label>
<div class="customerInput">
<input id="addressLine2" type="text" class="form-
control" formControlName="addressLine2"
(blur)="logValidationErrors()" placeholder="Enter
Address">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.addressLine2">
{{formErrors.addressLine2}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="city">City<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="city" type="text" class="form-control"
formControlName="city"
(blur)="logValidationErrors()" placeholder="Enter
City">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.city">
{{formErrors.city}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel" for="country">Country <span
style="color:#F85359">*</span></label>
<div class="customerInput">
<!-- <input id="country" type="text" class="form-
control" formControlName="country"
placeholder="Enter Country" style="background-
color: white;cursor: not-allowed;"> -->
<span class="rowSelect">
<!-- <select class="custom-select" id="country"
formControlName="country"
(change)="unsetState($event,'cur')"
(blur)="logValidationErrors()">
<option class="dropdown-item" disabled
value=""> Select Country</option>
<option class="dropdown-item" *ngFor="let
country of countryData.success"
[value]="country.countryCode">
{{country.countryName}} </option>
 </select> -->

<ng-select class="business" id="country"

formControlName="country"
(change)="unsetState($event,'cur')"
(blur)="logValidationErrors()"
[searchable]="true" [clearable]="false"
bindLabel="name" placeholder="Select type">
<ng-option value="" disabled selected>Select
Country</ng-option>
<ng-option *ngFor="let country of
countryData.success"

[value]="country.countryCode">{{country.countryName}}</ng-option>

</ng-select>

</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.country">
{{formErrors.country}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="postalCode">Zip / Postal Code<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="postalCode" type="text" class="form-
control" formControlName="postalCode"
(blur)="logValidationErrors()" placeholder="Enter
Zip / Postal Code">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.postalCode">
{{formErrors.postalCode}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel" for="state">State / Province
<span
style="color:#F85359">*</span></label>
<!-- <div class="customerInput">
<input id="state" type="text" class="form-control"
formControlName="state"
 placeholder="Enter State" style="background-
color: white;cursor: not-allowed;">
</div> -->
<span class="">
<!-- <select class="custom-select" id="state"
formControlName="state"
(blur)="logValidationErrors()">
<option class="dropdown-item" disabled value="">
State / Province </option>
<option class="dropdown-item" *ngFor="let state
of stateArray" [value]="state.code">
{{state.name}} </option>
</select> -->

<ng-select class="business" id="state"

formControlName="state"
(blur)="logValidationErrors()"
[searchable]="true" [clearable]="false"
bindLabel="name" placeholder="Select type">
<ng-option value="" disabled selected>Select
State</ng-option>
<ng-option *ngFor="let state of stateArray"
[value]="state.code">{{state.name}}</ng-option>

</ng-select>

</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.state">
{{formErrors.state}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 padding10 resp">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel" for="email">E-Mail
Address<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="email" type="text" class="form-control"
formControlName="email"
placeholder="Enter E-Mail Address"
(blur)="logValidationErrors()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.email">
{{formErrors.email}}
</span>
</div>
 </div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="website">Website</label>
<div class="customerInput">
<input id="website" type="text" class="form-control"
formControlName="website"
placeholder="Enter Website">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.website">
{{formErrors.website}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="contactName">Contact Name <span
style="color: red;">*</span></label>
<div class="customerInput">
<input id="contactName" type="text" class="form-
control" formControlName="contactName"
placeholder="Enter Contact Name">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.contactName">
{{formErrors.contactName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="position">Position</label>
<div class="customerInput">
<input id="position" type="text" class="form-
control" formControlName="position"
placeholder="Enter Position">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.position">
{{formErrors.position}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel"
for="phoneNo">Phone Number
<span style="color:#F85359">*</span>
 </label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px"
class="rowSelect">
<!-- <select style="font-size: 14px !
important;padding: 5px 10px 5px 5px;"
formControlName="phoneNoCode" class="custom-
select" id="country">
<option class="dropdown-item" *ngFor="let
country of countryData.success"
[value]="country.countryCode">
{{country.countryCode}} ({{country.countryPhCode}})
</option>
</select> -->
<ng-select class="flagOption"
[items]="countryData.success" bindLabel="countryCode"
bindValue="countryCode" [searchable]="false"
[clearable]="false"
formControlName="phoneNoCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" *ngIf="item.countryCode"
width="15" src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left:
6px;font-size: 14px;color: #7D7D7E;">{{item.countryPhCode
? '('+item.countryPhCode+')':'' }}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-
index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left:
10px;font-size: 14px;" *ngIf="item.countryPhCode!=''">({{item.countryPhCode}})</b>
<b style="font-weight: 400;margin-left:
10px;font-size: 14px;" *ngIf="item.countryPhCode===''"> </b>
</ng-template>
</ng-select>
</span>
<input id="phoneNo" type="text"
formControlName="phoneNo" class="form-control">
</div>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.phoneNo">
{{formErrors.phoneNo}}
</span>
</div>
</div>
<div class="col-sm-12 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="phoneExt">Ext</label>
<div class="customerInput">
<input id="phoneExt" type="text"
formControlName="phoneExt" class="form-control">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.phoneExt">
{{formErrors.phoneExt}}
</span>
</div>
</div>
 </div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel"
for="mobileNo">Mobile Number</label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px;"
class="rowSelect">
<!-- <select style="font-size: 14px !
important;padding: 5px 10px 5px 5px;"
formControlName="mobileNoCode" class="custom-
select" id="country">
<option class="dropdown-item" *ngFor="let
country of countryData.success"
[value]="country.countryCode">
{{country.countryCode}} ({{country.countryPhCode}})
</option>
</select> -->
<ng-select class="flagOption"
[items]="countryData.success" bindLabel="countryCode"
bindValue="countryCode" [searchable]="false"
[clearable]="false"
formControlName="mobileNoCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" *ngIf="item.countryCode"
width="15" src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left:
6px;font-size: 14px;color: #7D7D7E;">{{item.countryPhCode
? '('+item.countryPhCode+')':'' }}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-
index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left:
10px;font-size: 14px;" *ngIf="item.countryPhCode!=''">({{item.countryPhCode}})</b>
<b style="font-weight: 400;margin-left:
10px;font-size: 14px;" *ngIf="item.countryPhCode===''"></b>
</ng-template>
</ng-select>
</span>
<input id="mobileNo" type="text"
formControlName="mobileNo" class="form-control">
</div>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.mobileNo">
{{formErrors.mobileNo}}
</span>
</div>
</div>
<div class="col-sm-12 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="mobileExt">Ext</label>
<div class="customerInput">
 <input id="mobileExt" formControlName="mobileExt"
type="text" class="form-control">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.mobileExt">
{{formErrors.mobileExt}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of General Details ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

<!-- Contact Information section ********************

********************************************** **********************************
****************** -->

<div class="cardStyle mt-4">

<div class="contactList">
<div class="row setMargin0">
<div class="col-12 tablelistInner pr-0 pb-0 pl-0">
<div style="height:75px;width: 100%;" class="row mb-0 setMargin0">
<div class="col-12 applay_section ">
<div class="row pl-0 mb-0 align-items-start setMargin0">
<div style="text-align:start;" class="col-6 pt-3 ">
<h3 class="tableHeadingStyle" style="color: #354052 !
important;" > Contact information </h3>
</div>
<div style="text-align:end;padding-top: 1.5rem;" class="col-6
createbtn-btn-box">
<button type="button" style="padding: 0px 7px; width: 130px;"
class="btn btn-outline-warning"
(click)="open(content,'add')">+ Add Contact</button>
</div>
</div>
</div>
</div>
<div class="row customerTable mb-0 setMargin0" style="overflow:scroll;
overflow-y: hidden;">
<div class="col-12 pl-0 pr-0" style="z-index: 2; width:1500px !
important; min-width: 1500px !important;">
<table class="table table-responsive customStyle">
<thead
style="background-color: #F5F6FA; border-top: 1px solid
#C4CDD5; border-bottom: 1px solid #C4CDD5;height: 61px;">
<tr>
<th scope="col-2" (click)="sort('name','contact')">
 <span [class]="contactSortBy['name']">Name</span>
</th>
<th scope="col-2" (click)="sort('title','contact')">
<span [class]="contactSortBy['title']">Title</span>
</th>
<th scope="col-2">
<span>Primary Contact</span>
</th>
<th scope="col-2">
<span>Phone </span>
</th>
<th scope="col-2" (click)="sort('email','contact')">
<span [class]="contactSortBy['email']">Email</span>
</th>
<th scope="col-2">
<span>Email/SMS Notifications</span>
</th>
<th scope="col-2">
<span>Status</span>
</th>
<th style="width:110px" scope="col-2">Actions</th>
</tr>
</thead>
<tfoot class="bottomPaginationStyle">
<tr>
<th>
<button *ngIf="!getCheckedValue('contact')" type="button"
class="btn btn-Warn disabledButton">
<i class="fa fa-trash trash m-1" aria-hidden="true"
style="font-size: 16px;color:white;"></i>
Remove
</button>
<button *ngIf="getCheckedValue('contact')"
(click)="removeMultipleFromTable('contact')"
type="button" class="btn btn-Warn enabledButton">
<i class="fa fa-trash trash m-1" aria-hidden="true"
style="font-size: 16px;color:white;"></i>
Remove
</button>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>
<div class="optionPaginationStyle">
<span
style="font-size: 12px; color: #354052; font-family:
poppins,sans-serif; font-weight: 500;">Rows</span>
<span class="divDispForTotalCell">
{{contactInfromationList.length==0 ? '0-0': '1-'+
contactInfromationList.length}}
</span>
</div>
</th>
</tr>
</tfoot>
 <tbody class="">
<tr *ngIf="contactInfromationList.length==0" style="margin-top:
20px;color: #5d4646;">
<td colspan="9" class=" text-center">No data found!!!</td>
</tr>
<tr [class]="contact.checked ? 'addRowColor':''"
*ngFor="let contact of contactInfromationList;let i=index">
<td>
<div class="d-flex">
<div style="cursor: pointer;"> <input
(input)="toggleValueFunction(i,'checkBoxContact')"
style="" type="checkbox"
[disabled]="contact.is_primary_contact" [checked]="contact.checked" /></div>
<div style="margin-left: 10px;"> {{contact.name}} </div>
</div>
</td>
<td>
{{contact.title}}
</td>
<td>
<div class="d-flex" style="cursor: pointer;"
(click)="radioCheckContact(i)">
<input type="radio" style="pointer-events: none;"
[checked]="contact.is_primary_contact" />
<div style="margin-left: 10px;">
Primary
</div>
</div>
</td>
<td>
<a href="tel:{{contact.phone ? contact.phone :'--'}}"
style="color: #2877C6; text-decoration: none; cursor:
pointer;"> {{ '+1' + ' ('
+contact.phone.slice(0,3) + ') ' +
contact.phone.slice(3,6) +'-' + contact.phone.slice(6,10)
}}</a>
</td>
<td>
<a href="mailto:{{contact.email ? contact.email :'--'}}"
style="color: #2877C6; text-decoration: none; cursor:
pointer;">{{contact.email ?
contact.email
:'--'}}</a>
</td>
<td>
<div (click)="toggleValueFunction(i,'notification')"
style="cursor: pointer;width: max-content;"
class="d-flex form-group mb-0">
<label style="pointer-events: none;" class="switch">
<input style="pointer-events: none;" type="checkbox"
[checked]="contact.is_email_sms_notif_require">
<span style="margin-top: 3px;" class="slider
round"></span>
</label>
</div>
</td>
<td>
<div
style="font-size: 12px; font-weight: 400;background-
color: #E4E6E8;font-family: 'Poppins' !important"
[class]="!contact.status ? 'badge badge-secondary' :
'badge badge-success'">
<span>
{{contact.status ? 'Active':'Inactive'}}
</span>
</div>
</td>
<td class="action_td" style="width: 50px !important; color:
#354052;">
<img src="assets/img/common/hor_3_dots.png"
class="dropdown-toggle" style="cursor: pointer;"
data-toggle="dropdown">
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple>
<a class="dropdown-item"
(click)="setContactFormValueEdit(i,content)">Edit</a>
<!-- <div class="dropdown-divider"></div>
<a class="dropdown-item"
(click)="deleteRow('contact',i)">Delete</a> -->
<div class="dropdown-divider"></div>
<a class="dropdown-item"

(click)="changeStatusContactInfo(contact.contact_map_id,!
contact.status,i)">{{contact.status
? 'Deactivate' :'Activate'}}</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Contact Info ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

<!-- Billing Location section ********************

********************************************** **********************************
****************** -->

<div class="cardStyle mt-4">

<div class="contactList">
<div class="row setMargin0">
<div class="col-12 tablelistInner pr-0 pb-0 pl-0">
<div style="height:75px;width: 100%;" class="row mb-0 setMargin0">
<div class="col-12 applay_section ">
<div class="row pl-0 mb-0 align-items-start setMargin0">
<div style="text-align:start;" class="col-6 pt-3 ">
<h3 class="tableHeadingStyle" style="color:#354052 !important;"
> Billing Location </h3>
</div>
<div style="text-align:end;padding-top: 1.5rem;" class="col-6
createbtn-btn-box">
 <button type="button" style="padding: 0px 7px; width: 200px;"
class="btn btn-outline-warning"
(click)="openModalBilling(contentBilling,'add')">+ Add
Billing Location</button>
</div>
</div>
</div>
</div>
<div class="row customerTable mb-0 setMargin0" style="overflow:scroll;
overflow-y: hidden;">
<div class="col-12 pl-0 pr-0" style="z-index: 2; width: 1500px !
important; min-width: 1500px !important;">
<table class="table table-responsive customStyle">
<thead
style="background-color: #F5F6FA; border-top: 1px solid
#C4CDD5; border-bottom: 1px solid #C4CDD5;height: 61px;">
<tr>
<th scope="col-2">
<span>Company Name</span>
</th>
<th scope="col-2">
<span>Address</span>
</th>
<th scope="col-2">
<span>Default Payment Location</span>
</th>
<th scope="col-2" (click)="sort('contact_name','billing')">
<span
[class]="billingSortBy['contact_name']">Contact</span>
</th>
<th scope="col-2" (click)="sort('email_adress','billing')">
<span [class]="billingSortBy['email_adress']">Email</span>
</th>
<th scope="col-2" (click)="sort('phone_number','billing')">
<span [class]="billingSortBy['phone_number']">Phone </span>
</th>
<th scope="col-2">
<span>Status</span>
</th>
<th style="width:110px" scope="col-2">Actions</th>
</tr>
</thead>
<tfoot class="bottomPaginationStyle">
<tr>
<th>
<button *ngIf="!getCheckedValue('billing')" type="button"
class="btn btn-Warn disabledButton">
<i class="fa fa-trash trash m-1" aria-hidden="true"
style="font-size: 16px;color:white;"></i>
Remove
</button>
<button *ngIf="getCheckedValue('billing')"
(click)="removeMultipleFromTable('billing')"
type="button" class="btn btn-Warn enabledButton">
<i class="fa fa-trash trash m-1" aria-hidden="true"
style="font-size: 16px;color:white;"></i>
Remove
</button>
</th>
 <th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>
<div class="optionPaginationStyle">
<span
style="font-size: 12px; color: #354052; font-family:
poppins,sans-serif; font-weight: 500;">Rows</span>
<span class="divDispForTotalCell">
{{billingLocationList.length==0 ? '0-0': '1-'+
billingLocationList.length}}
</span>
</div>
</th>
</tr>
</tfoot>
<tbody class="">
<tr *ngIf="billingLocationList.length==0" style="margin-top:
20px;color: #5d4646;">
<td colspan="9" class=" text-center">No data found!!!</td>
</tr>
<tr [class]="billing.checked ? 'addRowColor':''"
*ngFor="let billing of billingLocationList;let i=index">
<td>
<div class="d-flex">
<div style="cursor: pointer;"
(click)="toggleValueFunction(i,'checkBoxBilling')"> <input
style="pointer-events: none;" type="checkbox"
[checked]="billing.checked" /></div>
<div style="margin-left: 10px;"> {{billing.company_name}}
</div>
</div>
</td>
<td>
{{billing.address_line1}}
</td>
<td>
<div class="d-flex" style="cursor: pointer;"
(click)="radioCheckBilling(i)">
<input type="radio" style="pointer-events: none;"
[checked]="billing.is_default_payment_location" />
<div style="margin-left: 10px;">
Default
</div>
</div>
</td>
<td>
{{billing.contact_name}}
</td>
<td>
<a href="mailto:{{billing.email ? billing.email :'--'}}"
style="color: #2877C6; text-decoration: none; cursor:
pointer;">{{billing.email_adress ?
billing.email_adress
:'--'}}</a>
</td>
 <td>
<a href="tel:{{billing.phone ? billing.phone :'--'}}"
style="color: #2877C6; text-decoration: none; cursor:
pointer;">{{ '+1' + ' ('
+billing.phone_number.toString().slice(0,3) + ') ' +
billing.phone_number.toString().slice(3,6)
+'-' + billing.phone_number.toString().slice(6,10) }}</a>
</td>
<td>
<div
style="font-size: 12px; font-weight: 400;background-
color: #E4E6E8;font-family: 'Poppins' !important"
[class]="billing.status!=='true' ? 'badge badge-
secondary' : 'badge badge-success'">
<span>
{{billing.status=="true" ? 'Active':'Inactive'}}
</span>
</div>
</td>
<td class="action_td" style="width: 50px !important; color:
#354052;">
<img src="assets/img/common/hor_3_dots.png"
class="dropdown-toggle" style="cursor: pointer;"
data-toggle="dropdown">
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple>
<a class="dropdown-item"
(click)="setDataForEdit(i,contentBilling)">Edit</a>
<div class="dropdown-divider"></div>
<!-- <a class="dropdown-item"
(click)="deleteRow('billing',i)">Delete</a> -->
<a class="dropdown-item"

(click)="changeStatusBilling(billing.billing_id,billing.status,i)">{{billing.status
=='true'
? 'Deactivate' : 'Activate'}}</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Billing Loaction ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

<!-- Default accessorial section

***********************************************************************************
*********************************** -->

<div class="cardStyle mt-4">

<div style="border-bottom: 1px solid #C4CDD5;">
 <h3 class="padding10vertical20Horizontal"
style="font-weight: 500;font-size: 22px;font-family: 'Poppins'!important;
color: #354052; margin-bottom:0px !important; padding:13px 20px !important;"> Set
default Accessorial
</h3>
</div>
<div>
<div class="padding20vertical20Horizontal">
<form [formGroup]="accAndPickupDeliveryForm">
<div class="row" style="padding: 0 10px;">
<div class="col-sm-12 col-lg-6 pr-4">
<div class="row">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="bStatus">Business Type <span
style="color:red">*</span></label>
</div>
<div class="form-group">
<ng-select class="business" id="bStatus"
(change)='onOptionsSelected($event)' [searchable]="true"
[clearable]="false" bindLabel="name" placeholder="Select
type" formControlName="bStatus">
<ng-option value="" disabled selected>Select one</ng-
option>
<ng-option *ngFor="let type of loadData.business_type"
[value]="type.business_id">
{{type.business_type}}</ng-option>
</ng-select>
<span style="color:red"
*ngIf="businessSelectionError">Business Type is required</span>

</div>
</div>
</div>
<div class="row">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="aNotes">Additional
Notes</label>
</div>
<div class="form-group">
<textarea id="aNotes" class="textAreaStyle"
formControlName="aNotes" rows="6"></textarea>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="accAndPickupDeliveryForm.touched &&
accAndPickupDeliveryForm.get('aNotes').errors &&
accAndPickupDeliveryForm.get('aNotes').errors.maxlength">
Limit exceeds *
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="tabAreaDesign">
<div class="row">
<div class="col-sm-12">
<label class="formLabel" for="bStatus">Accessorial</label>
</div>
 <div class="col-sm-12">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/common/plus.svg" class="mr-2 text-
center dropdown-toggle"
style="width: 27px;cursor: pointer;" data-
toggle="dropdown">
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple style="max-height: 230px;
overflow-y: scroll;">
<a class="dropdown-item" style="color:red"
*ngIf="accessorialTypesFetchedAll.length == 0">Select
business type
First</a>
<a class="dropdown-item" *ngFor="let accType of
accessorialTypesFetchedAll;let i=index"
style="border-bottom: 1px solid #c9c9cd;"

(click)="addAccessorialPackageAndServices(i,'acc')">{{accType.serviceName}}</a>
<!-- <div class="dropdown-divider"></div> -->
</div>
</div>
<div class="col-sm-11 displayFlexWrap">
<div class="selectedTabsStyle"
*ngFor="let accTypeSelected of selectedAccessorial;let
i=index">
<span style="color:#354052;font-size:
12px;">{{accTypeSelected.serviceName}}</span>
<img style="cursor: pointer;
margin-left: 10px;
width: 7px;"
(click)="removeAccessoialPackageAndServices(i,'acc')"
src="assets/img/common/fi-rr-cross-small.svg">
</div>
</div>
</div>
</div>
</div>
<div class="row mt15pxResponsive">
<div class="col-sm-12">
<label class="formLabel" for="bStatus">Services <span
style="color:red">*</span></label>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/common/plus.svg" class="mr-2 text-
center dropdown-toggle"
style="width: 27px;cursor: pointer;" data-
toggle="dropdown">
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple style="max-height: 230px;
overflow-y: scroll;">
<a class="dropdown-item" *ngFor="let service of
serviceType;let i=index"
style="border-bottom: 1px solid #c9c9cd;"

(click)="addAccessorialPackageAndServices(i,'ser')">{{service.services}}</a>
<!-- <div class="dropdown-divider"></div> -->
 </div>
</div>
<div class="col-sm-11 displayFlexWrap">
<div class="selectedTabsStyle" *ngFor="let
serTypeSelected of selectedServices;let i=index">
<span style="color:#354052;font-size:
12px;">{{serTypeSelected.services}}</span>
<img style="cursor: pointer;
margin-left: 10px;
width: 7px;"
(click)="removeAccessoialPackageAndServices(i,'ser')"
src="assets/img/common/fi-rr-cross-small.svg">
</div>
</div>
<span style="color:red"
*ngIf="serviceSelectionError">Service is Required</span>
</div>
</div>
</div>
<div class="row mt15pxResponsive">
<div class="col-sm-12">
<label class="formLabel" for="bStatus">Package Types</label>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/common/plus.svg" class="mr-2 text-
center dropdown-toggle"
style="width: 27px;cursor: pointer;" data-
toggle="dropdown">
<div class="dropdown-menu" aria-
labelledby="dropdownMenuButton" multiple style="max-height: 230px;
overflow-y: scroll;">
<a class="dropdown-item" style="color:red"
*ngIf="packageType.length == 0">select services
first</a>
<a class="dropdown-item" *ngFor="let package of
packageType;let i=index"
style="border-bottom: 1px solid #c9c9cd;"

(click)="addAccessorialPackageAndServices(i,'pac')">{{package && package.packages ?

package.packages :'--'}}</a>
<!-- <div class="dropdown-divider"></div> -->
</div>
</div>
<div class="col-sm-11 displayFlexWrap">
<div class="selectedTabsStyle" *ngFor="let
pacTypeSelected of selectedPackages;let i=index">
<span style="color:#354052;font-size:
12px;">{{pacTypeSelected && pacTypeSelected.packages ?
pacTypeSelected.packages :'--'}}</span>
<img style="cursor: pointer;
margin-left: 10px;
width: 7px;"
(click)="removeAccessoialPackageAndServices(i,'pac')"
src="assets/img/common/fi-rr-cross-small.svg">
</div>
</div>
</div>
 </div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Default accessorial section ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

<!-- Delivery and pickup section

***********************************************************************************
*********************************** -->

<div class="cardStyle mt-4">

<div style="border-bottom: 1px solid #C4CDD5;">
<h3 class="padding10vertical20Horizontal"
style="font-weight: 500;font-size: 22px;font-family: 'Poppins' !
important; color: #354052; padding:13px 20px !important;margin-bottom: 0px !
important;"> Pickup & Delivery
Instructions </h3>
</div>
<div>
<div class="padding20vertical20Horizontal">
<form [formGroup]="accAndPickupDeliveryForm">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="row" style="padding: 0 20px 0 10px;">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="pickInst">Pickup
instructions</label>
</div>
<div class="form-group">
<textarea id="pickInst" formControlName="pickInst"
class="textAreaStyle" rows="4"></textarea>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="accAndPickupDeliveryForm.touched &&
accAndPickupDeliveryForm.get('pickInst').errors &&
accAndPickupDeliveryForm.get('pickInst').errors.maxlength">
Limit exceeds *
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="row" style="padding: 0 16px 0 15px;">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="delInst">Delivery
instructions</label>
</div>
<div class="form-group">
 <textarea id="delInst" formControlName="delInst"
class="textAreaStyle" rows="4"></textarea>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="accAndPickupDeliveryForm.touched &&
accAndPickupDeliveryForm.get('delInst').errors &&
accAndPickupDeliveryForm.get('delInst').errors.maxlength">
Limit exceeds *
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End delivery and pickup ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

<!-- Order entry section

***********************************************************************************
*********************************** -->

<div class="cardStyle mt-4">

<div style="border-bottom: 1px solid #C4CDD5;">
<h3 class="padding10vertical20Horizontal"
style="font-weight: 500;font-size: 22px;font-family: 'Poppins' !
important; color: #354052; margin-bottom: 0px !important; padding:13px !
important;"> Order Entry </h3>
</div>
<div>
<div class="padding20vertical20Horizontal">
<div class="row">
<div class="col-sm-12 col-lg-6 borderRightForm">
<form [formGroup]="shipperForm">
<div class="col-sm-12">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="selectShipper">Shipper</label>
</div>
<div class="form-group">
<ng-select class="orderEntry" id="selectShipper"
(keyup)="setDataFromAddressBook($event,'shipper')"
(change)="setFetchedDataAddress($event,'shipper')"
[searchable]="true" [clearable]="false"
bindLabel="name" placeholder="Search Shipper"
formControlName="selectShipper">
<ng-option value="" disabled
selected>{{shipperSerachText}}</ng-option>
<ng-option *ngFor="let data of shipperDrpdwn"
[value]="data.addressId">
{{data.company}}</ng-option>
</ng-select>
<!-- <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.status">
 {{formErrors.status}}
</span> -->
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="shipperName">Shipper Name</label>
<label class="control-label formLabel"
style="float:right;color: #2877C6 !important;cursor: pointer;" for="shipperName"
*ngIf="customerDetailsBoolean" (click)="removeShipper('shipper')">Remove
Shipper</label>
<div class="customerInput">
<input id="shipperName" type="text" class="form-control"
formControlName="shipperName"
placeholder="Enter Shipper Name"
(keyup)="shipperNameInOrderEntry()"
(blur)="logValidationErrorsShipper()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.shipperName">
{{formErrorsShipper.shipperName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="displayFlexBetween">
<label class="control-label formLabel"
for="addressLine1Shipper">Address Line 1</label>
<div class="d-flex aligin-items-center">
<label style="font-size: 14px !important;" class="formLabel
responsiveHide"> Google Maps
</label>
<img style="
height: 14px;
width: 14px;
margin-right: 4px;
margin-left: 1px;
margin-top: 3px;" src="assets/img/common/google-maps.svg"
alt="">
<div style="cursor: pointer;"
(click)="toggleManualLookUp('shi')">
<label style="width: 42px !important;pointer-events:
none" class="switch">
<input style="pointer-events: none " type="checkbox"
[checked]="isManualLookUpShipper">
<span style="background-color: #2196f3 !
important;margin-top: 3px;margin-left: 3px;"
class="slider round"></span>
</label>
</div>
<label [ngClass]="isManualLookUpShipper ? 'dark-text' :
'grey-text1'" style="font-size: 14px;" class="control-label">
Manual Lookup
</label>
</div>
</div>
 <div class="customerInput">
<input *ngIf="!isManualLookUpShipper"
id="addressLine1Shipper" ngx-google-places-autocomplete
(onAddressChange)="handleAddressChange($event,'shipper')"
type="text" class="form-control"
(blur)="logValidationErrorsShipper()"
formControlName="addressLine1Shipper"
placeholder="Search Address">

<input *ngIf="isManualLookUpShipper" id="addressLine1Shipper"

type="text" class="form-control"
formControlName="addressLine1Shipper" placeholder="Enter
Address">

<span style="color:#FF0000;font-size: 12px;"

*ngIf="showErrorGoogleMapShipper">
Please select more specific address! e.g. street, route,
city, state and country
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.addressLine1Shipper">
{{formErrorsShipper.addressLine1Shipper}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="addressLine2Shipper">Address Line 2</label>
<div class="customerInput">
<input id="addressLine2Shipper" type="text" class="form-
control" placeholder="Enter Address"
(blur)="logValidationErrorsShipper()"
formControlName="addressLine2Shipper">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.addressLine2Shipper">
{{formErrorsShipper.addressLine2Shipper}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="cityShipper">City</label>
<div class="customerInput">
<input id="cityShipper" type="text" class="form-control"
placeholder="Enter City"
(blur)="logValidationErrorsShipper()"
formControlName="cityShipper">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.cityShipper">
{{formErrorsShipper.cityShipper}}
</span>
</div>
</div>
 </div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel"
for="countryShipper">Country</label>
<div class="customerInput">
<span class="rowSelect">
<select class="custom-select" id="countryShipper"
(change)="unsetState($event,'shi')"
(blur)="logValidationErrorsShipper()"
formControlName="countryShipper">
<option class="dropdown-item" disabled
value="">Select Country</option>
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode">
{{country.countryName}} </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.countryShipper">
{{formErrorsShipper.countryShipper}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="postalCodeShipper">Zip / Postal Code</label>
<div class="customerInput">
<input id="postalCodeShipper" type="text" class="form-
control"
(blur)="logValidationErrorsShipper()"
formControlName="postalCodeShipper"
placeholder="Enter Zip / Postal Code">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.postalCodeShipper">
{{formErrorsShipper.postalCodeShipper}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel" for="stateShipper">State /
Province </label>
<span class="rowSelect">
<select class="custom-select" id="stateShipper"
formControlName="stateShipper"
(blur)="logValidationErrorsShipper()">
<option class="dropdown-item" disabled value="">
State / Province </option>
<option class="dropdown-item" *ngFor="let state of
stateArrayShipper" [value]="state.code">
 {{state.name}} </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.stateShipper">
{{formErrorsShipper.stateShipper}}
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel" for="firstName">First
Name</label>
<div class="customerInput">
<input id="firstName" type="text" class="form-control"
formControlName="firstName"
placeholder="Enter First Name"
(input)="logValidationErrorsShipper()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.firstName">
{{formErrorsShipper.firstName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel" for="lastName">Last
Name</label>
<div class="customerInput">
<input id="lastName" type="text" class="form-control"
formControlName="lastName"
placeholder="Enter Last Name"
(blur)="logValidationErrorsShipper()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.lastName">
{{formErrorsShipper.lastName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="emailShipper">Email</label>
<div class="customerInput">
<input id="emailShipper" type="text" class="form-control"
formControlName="emailShipper"
(blur)="logValidationErrorsShipper()" placeholder="Enter
Email">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.emailShipper">
{{formErrorsShipper.emailShipper}}
</span>
</div>
</div>
</div>
 <div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel"
for="phoneNoShipper">Phone Number
</label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px"
class="rowSelect">
<!-- <select style="font-size: 14px !important;padding:
5px 10px 5px 5px;"
formControlName="phoneNoCode" class="custom-select"
id="country">
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode">
{{country.countryCode}} ({{country.countryPhCode}})
</option>
</select> -->
<ng-select class="flagOption"
[items]="countryData.success" bindLabel="countryCode"
bindValue="countryCode" [searchable]="false"
[clearable]="false"
formControlName="phoneNoCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 6px;font-
size: 14px;color: #7D7D7E;">{{item.countryPhCode
? '('+item.countryPhCode+')':'' }}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-
index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b
style="font-weight: 400;margin-left: 10px;font-
size: 14px;" *ngIf="item.countryPhCode!=''">({{item.countryPhCode}})</b>
<b
style="font-weight: 400;margin-left: 10px;font-
size: 14px;" *ngIf="item.countryPhCode===''"></b>
</ng-template>
</ng-select>
</span>
<input id="phoneNoShipper" type="text" class="form-
control" formControlName="phoneNoShipper"
(blur)="logValidationErrorsShipper()">
</div>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.phoneNoShipper">
{{formErrorsShipper.phoneNoShipper}}
</span>
</div>
</div>
<div class="col-sm-3 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="phoneExtShipper">Ext</label>
 <div class="customerInput">
<input id="phoneExtShipper" type="text" class="form-
control"
formControlName="phoneExtShipper">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsShipper?.phoneExtShipper">
{{formErrorsShipper.phoneExtShipper}}
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-12 col-lg-6 ">
<form [formGroup]="consigneeForm">
<div class="col-sm-12">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel"
for="selectConsignee">Consignee</label>
</div>
<div class="form-group">
<ng-select class="orderEntry" id="selectConsignee"
(keyup)="setDataFromAddressBook($event,'consignee')"
(change)="setFetchedDataAddress($event,'consignee')"
[searchable]="true" [clearable]="false"
bindLabel="name" placeholder="Search Consignee"
formControlName="selectConsignee">
<ng-option value="" disabled
selected>{{consigneeSearchText}}</ng-option>
<ng-option *ngFor="let data of consigneeDrpdwn"
[value]="data.addressId">
{{data.company}}</ng-option>
</ng-select>
<!-- <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.status">
{{formErrors.status}}
</span> -->
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="consigneeName">Consignee Name</label>
<label class="control-label formLabel"
style="float:right;color: #2877C6 !important;cursor: pointer;" for="shipperName"
*ngIf="customerDetailsBoolean" (click)="removeShipper('consignee')">Remove
Consignee</label>
<div class="customerInput">
<input id="consigneeName" type="text" class="form-control"
formControlName="consigneeName"
(blur)="logValidationErrorsConsignee()"
(keyup)="consigneeNameInOrderEntry()"
placeholder="Enter Consignee Name">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.consigneeName">
 {{formErrorsConsignee.consigneeName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="displayFlexBetween">
<label class="control-label formLabel"
for="addressLine1Consignee">Address Line 1</label>
<div class="d-flex aligin-items-center">
<label style="font-size: 14px !important;" class="formLabel
responsiveHide"> Google Maps
</label>
<img style="
height: 14px;
width: 14px;
margin-right: 4px;
margin-left: 1px;
margin-top: 3px;" src="assets/img/common/google-maps.svg"
alt="">
<div style="cursor: pointer;"
(click)="toggleManualLookUp('con')">
<label style="width: 42px !important;pointer-events:
none" class="switch">
<input style="pointer-events: none " type="checkbox"
[checked]="isManualLookUpConsignee">
<span style="background-color: #2196f3 !
important;margin-top: 3px;margin-left: 3px;"
class="slider round"></span>
</label>
</div>
<label [ngClass]="isManualLookUpConsignee ? 'dark-text' :
'grey-text1'" style="font-size: 14px;" class="control-label">
Manual Lookup
</label>
</div>
</div>
<div class="customerInput">
<input *ngIf="!isManualLookUpConsignee"
id="addressLine1Consignee" ngx-google-places-autocomplete
(blur)="logValidationErrorsConsignee()"
(onAddressChange)="handleAddressChange($event,'consignee')"
type="text" class="form-control"
formControlName="addressLine1Consignee" placeholder="Search
Address">

<input *ngIf="isManualLookUpConsignee"
id="addressLine1Consignee" type="text" class="form-control"
formControlName="addressLine1Consignee" placeholder="Enter
Address">

<span style="color:#FF0000;font-size: 12px;"

*ngIf="showErrorGoogleMapConsignee">
Please select more specific address! e.g. street, route,
city, state and country
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.addressLine1Consignee">
 {{formErrorsConsignee.addressLine1Consignee}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="addressLine2Consignee">Address Line 2</label>
<div class="customerInput">
<input id="addressLine2Consignee" type="text" class="form-
control" placeholder="Enter Address"
(blur)="logValidationErrorsConsignee()"
formControlName="addressLine2Consignee">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.addressLine2Consignee">
{{formErrorsConsignee.addressLine2Consignee}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="cityConsignee">City</label>
<div class="customerInput">
<input id="cityConsignee" type="text" class="form-
control" placeholder="Enter City"
(blur)="logValidationErrorsConsignee()"
formControlName="cityConsignee">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.cityConsignee">
{{formErrorsConsignee.cityConsignee}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel"
for="countryConsignee">Country</label>
<div class="customerInput">
<span class="rowSelect">
<select class="custom-select" id="countryConsignee"
(change)="unsetState($event,'con')"
(blur)="logValidationErrorsConsignee()"
formControlName="countryConsignee">
<option class="dropdown-item" disabled value="">
Select Country</option>
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode">
{{country.countryName}} </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.countryConsignee">
 {{formErrorsConsignee.countryConsignee}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="postalCodeConsignee">Zip / Postal Code</label>
<div class="customerInput">
<input id="postalCodeConsignee" type="text" class="form-
control"
formControlName="postalCodeConsignee"
placeholder="Enter Zip / Postal Code"
(blur)="logValidationErrorsConsignee()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.postalCodeConsignee">
{{formErrorsConsignee.postalCodeConsignee}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel" for="stateConsignee">State /
Province </label>
<span class="rowSelect">
<select class="custom-select" id="stateConsignee"
formControlName="stateConsignee"
(blur)="logValidationErrorsConsignee()">
<option class="dropdown-item" disabled value="">
State / Province </option>
<option class="dropdown-item" *ngFor="let state of
stateArrayConsignee"
[value]="state.code">
{{state.name}} </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.stateConsignee">
{{formErrorsConsignee.stateConsignee}}
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel" for="firstName">First
Name</label>
<div class="customerInput">
<input id="firstName" type="text" class="form-control"
formControlName="firstName"
(input)="logValidationErrorsConsignee()"
placeholder="Enter First Name">
 <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.firstName">
{{formErrorsConsignee.firstName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel" for="lastName">Last
Name</label>
<div class="customerInput">
<input id="lastName" type="text" class="form-control"
formControlName="lastName"
(blur)="logValidationErrorsConsignee()"
placeholder="Enter Last Name">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.lastName">
{{formErrorsConsignee.lastName}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="emailConsignee">Email</label>
<div class="customerInput">
<input id="emailConsignee" type="text" class="form-control"
formControlName="emailConsignee"
(blur)="logValidationErrorsConsignee()" placeholder="Enter
Email">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.emailConsignee">
{{formErrorsConsignee.emailConsignee}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel"
for="phoneNoConsignee">Phone Number
</label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px"
class="rowSelect">
<!-- <select style="font-size: 14px !important;padding:
5px 10px 5px 5px;" class="custom-select"
id="country" formControlName="phoneNoCode">
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode">
{{country.countryCode}} ({{country.countryPhCode}})
</option>
</select> -->
<ng-select class="flagOption"
[items]="countryData.success" bindLabel="countryCode"
bindValue="countryCode" [searchable]="false"
[clearable]="false"
formControlName="phoneNoCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 6px;font-
size: 14px;color: #7D7D7E;">{{item.countryPhCode
? '('+item.countryPhCode+')':'' }}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-
index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 10px;font-
size: 14px;" *ngIf="item.countryPhCode!=''">({{item.countryPhCode}})</b>
<b style="font-weight: 400;margin-left: 10px;font-
size: 14px;" *ngIf="item.countryPhCode===''"> </b>
</ng-template>
</ng-select>
</span>
<input id="phoneNoConsignee" type="text" class="form-
control"
(blur)="logValidationErrorsConsignee()"
formControlName="phoneNoConsignee">
</div>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.phoneNoConsignee">
{{formErrorsConsignee.phoneNoConsignee}}
</span>
</div>
</div>
<div class="col-sm-3 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="phoneExtConsignee">Ext</label>
<div class="customerInput">
<input id="phoneExtConsignee" type="text" class="form-
control"
formControlName="phoneExtConsignee">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsConsignee?.phoneExtConsignee">
{{formErrorsConsignee.phoneExtConsignee}}
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-12">
<form [formGroup]="orderEntryForm" style="padding:0 10px">
<div class="row">
<div class="col-12 col-md-6 ">
<div class="form-group">
<label class="formLabel" for="orderCategory">Category</label>
<!-- <div class="customerInput">
 <input id="state" type="text" class="form-control"
formControlName="state"
placeholder="Enter State" style="background-color:
white;cursor: not-allowed;">
</div> -->
<span class=" ">
<!-- <select class="custom-select" id="orderCategory"
formControlName="orderCategory">
<option class="dropdown-item" value=""> Select
Category</option>
<option class="dropdown-item" *ngFor="let cat of
selectedServices" [value]="cat.services_id">
{{cat.services}} </option>
</select> -->
<ng-select class="business" id="orderCategory"
[searchable]="true" [clearable]="false"
bindLabel="name" placeholder="Select type"
formControlName="orderCategory">
<ng-option *ngFor="let cat of selectedServices"
[value]="cat.services_id">
{{cat.services}}</ng-option>

</ng-select>
</span>
</div>
</div>
<div class="col-sm-6" style="padding: 0px 24px;">
<label class="formLabel">Defaults</label>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label style="color:#7F8FA4 !important;font-size:
14px;">Live Load Option</label>
<div>
<input type="checkbox" formControlName="poRequired" />
<label class="formLabel" style="margin-left:
10px;">P.O. Required</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label style="color:#7F8FA4 !important;font-size:
14px;">Live UnLoad Option</label>
<div>
<input type="checkbox" formControlName="asHasMat" />
<label class="formLabel" style="margin-left: 10px;">As
Haz. Mat</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
 </div>
<!-- End order Entry ********** ****************************
********************* *************************** ***********************
********* *********************** ********* *********************** ********* --
>

</div>
<div class="footerSeperateDiv">
</div>
<div class="bottomFooter">
<div class="buttonDiv">
<button type="button" class="btn btn-outline-warning"
style="color:#354052;border-color: white;"
(click)="redirectToCustomerList()">Cancel</button>
<button *ngIf="!isEdit" type="button" class="btn btn-outline-warning btn-
color widthResponsiveCreateCustomBtn"
(click)="saveGeneralDetails()">Create Customer
-></button>
<button *ngIf="isEdit" (click)="updateCustomer()" type="button"
class="btn btn-outline-warning btn-color
widthResponsiveCreateCustomBtn">save Edits
</button>
</div>

</div>
</div>

<!-- modal for loading ********************* *********************

********************* ********************* *********************-->

<!-- <ng-template #loadContent let-modal>

<div class="modal-header">
<h4 class="modal-title">Loading please wait..</h4>
<div class="spinner-border text-light ml-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</ng-template> -->
<app-spinner></app-spinner>

<!-- End modal for loading ********************* *********************

********************* ********************* *********************-->

<!-- modal for contact form ********************* *********************

********************* ********************* *********************-->

<ng-template #content let-c="close" let-d="dismiss">

<form [formGroup]="contactForm">
<div class="modal-header">
<h3 style="font-weight: 500;font-size: 18px;padding: 10px 0px;font-family:
'Poppins' !important"> Adding Contact
Information </h3>
<img class="crossImageStyle" style="margin-top: 10px;" (click)="d('Cross
click')"
 src="assets/img/common/fi-rr-cross-small.svg">
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="fnameContact">First
Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="fnameContact" type="text" class="form-control"
(input)="logValidationErrorsContact()"
formControlName="fnameContact" placeholder="Enter First Name"

(input)="checkCompanyNameAndEmailAlreadyExistInContactInformation()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.fnameContact">
{{formErrorsContact.fnameContact}}
</span>

</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="lnameContact">Last
Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="lnameContact" type="text" class="form-control"
formControlName="lnameContact"
placeholder="Enter Last Name"
(input)="checkCompanyNameAndEmailAlreadyExistInContactInformation()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.lnameContact">
{{formErrorsContact.lnameContact}}
</span>
</div>
</div>
</div>
</div>
<span style="color: red; font-size: 14px;" *ngIf="dataPresent">Name and Email
Combination is Already Present.
Please try with Different</span>

<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="titleContact">Title
</label>
<div class="customerInput">
<input id="titleContact" type="text" class="form-control"
formControlName="titleContact"
(blur)="logValidationErrorsContact()" placeholder="Enter Title">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.titleContact">
{{formErrorsContact.titleContact}}
</span>
</div>
 </div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="emailContact">Email<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="emailContact" type="text" class="form-control"
formControlName="emailContact"
(blur)="logValidationErrorsContact()" placeholder="Enter Email"

(input)="checkCompanyNameAndEmailAlreadyExistInContactInformation()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.emailContact">
{{formErrorsContact.emailContact}}
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="phoneNoContact">Phone
Number<span
style="color:#F85359">*</span></label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px;" class="rowSelect">
<!-- <select style="font-size: 14px !important;padding: 5px 10px
5px 5px;" class="custom-select"
formControlName="countryCode" id="country">
<option *ngFor="let country of countryData.success"
[value]="country.countryCode"
class="dropdown-item"> {{country.countryCode}}
({{country.countryPhCode}}) </option>
</select> -->
<ng-select class="flagOption" [items]="countryData.success"
bindLabel="countryCode"
bindValue="countryCode" [searchable]="false" [clearable]="false"
formControlName="countryCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b
style="font-weight: 400;margin-left: 6px;font-size:
14px;color: #7D7D7E;">({{item.countryPhCode}})</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 10px;font-size:
14px;">({{item.countryPhCode}})</b>
</ng-template>
</ng-select>
</span>
<input id="phoneNoContact" type="text" class="form-control"
formControlName="phoneNoContact"
(blur)="logValidationErrorsContact()">
</div>
 <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.phoneNoContact">
{{formErrorsContact.phoneNoContact}}
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="form-group">
<label class="control-label formLabel"
for="phoneExtContact">Ext</label>
<div class="customerInput">
<input id="phoneExtContact" type="text" class="form-control"
formControlName="phoneExtContact"
(blur)="logValidationErrorsContact()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.phoneExtContact">
{{formErrorsContact.phoneExtContact}}
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="mobileNoContact">Mobile
Phone</label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px;" class="rowSelect">
<!-- <select style="font-size: 14px !important;padding: 5px 10px
5px 5px;" class="custom-select"
formControlName="countryCodeM" id="country">
<option *ngFor="let country of countryData.success"
[value]="country.countryCode"
class="dropdown-item"> {{country.countryCode}}
({{country.countryPhCode}}) </option>
</select> -->
<ng-select class="flagOption" [items]="countryData.success"
bindLabel="countryCode"
bindValue="countryCode" [searchable]="false" [clearable]="false"
formControlName="countryCodeM">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b
style="font-weight: 400;margin-left: 6px;font-size:
14px;color: #7D7D7E;">({{item.countryPhCode}})</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 10px;font-size:
14px;">({{item.countryPhCode}})</b>
</ng-template>
</ng-select>
</span>
<input id="mobileNoContact" type="text" class="form-control"
formControlName="mobileNoContact">
</div>
 <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsContact?.mobileNoContact">
{{formErrorsContact.mobileNoContact}}
</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-cancel" (click)="d('Cancel
click')">Cancel</button>
<button type="button" style="padding: 0px 7px; width: 90px;" class="btn btn-
color"
(click)="contactForm.valid && !dataPresent ? c('Save click') :
submitClickedContactShowError()">save</button>
</div>
</form>
</ng-template>

<!-- End modal for contact form ********************* *********************

********************* ********************* *********************-->

<!-- modal for payment form ********************* *********************

********************* ********************* *********************-->

<ng-template #contentBilling let-c="close" let-d="dismiss">

<form [formGroup]="paymentForm">
<div class="modal-header">
<h3 style="font-weight: 500;font-size: 18px;padding: 10px 0px;font-family:
'Poppins' !important"> Adding Payment
Location </h3>
<img class="crossImageStyle" style="margin-top: 10px;" (click)="d('Cross
click')"
src="assets/img/common/fi-rr-cross-small.svg">
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel" for="nameBilling">Company
Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="nameBilling" type="text" class="form-control"
placeholder="Enter name"
formControlName="nameBilling"
(input)="logValidationErrorsBilling()" (keyup)="companyNameInBilling()"
(input)='checkDataIsAlreadyPresentOrNot()'>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.nameBilling">
{{formErrorsBilling.nameBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
 <div class="form-group">
<label class="control-label formLabel"
for="titleBilling">Title</label>
<div class="customerInput">
<input id="titleBilling" type="text" class="form-control"
placeholder="Enter title"
formControlName="titleBilling"
(blur)="logValidationErrorsBilling()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.titleBilling">
{{formErrorsBilling.titleBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12" *ngIf="dataPresentInBilling" style="color:
red;">
Company Name and Email combination is already Exists! Please try with
different.
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="displayFlexBetween">
<label class="control-label formLabel"
for="addressLine1Billing">Address Line 1<span
style="color:#F85359">*</span></label>
<div class="d-flex aligin-items-center">
<label style="font-size: 14px !important;" class="formLabel
responsiveHide"> Google Maps </label>
<img style="
height: 14px;
width: 14px;
margin-right: 4px;
margin-left: 1px;
margin-top: 3px;" src="assets/img/common/google-maps.svg"
alt="">
<div style="cursor: pointer;"
(click)="toggleManualLookUp('pay')">
<label style="width: 42px !important;pointer-events: none"
class="switch">
<input style="pointer-events: none " type="checkbox"
[checked]="isManualLookUpPay">
<span style="background-color: #2196f3 !important;margin-
top: 3px;margin-left: 3px;"
class="slider round"></span>
</label>
</div>
<label style="color: #7F8FA4 !important;font-size: 14px;"
class="control-label">
Manual Lookup
</label>
</div>
</div>
<div class="customerInput">

<input *ngIf="!isManualLookUpPay" id="addressLine1Billing" ngx-

google-places-autocomplete
(onAddressChange)="handleAddressChange($event,'billing')"
type="text" class="form-control"
 formControlName="addressLine1Billing"
(blur)="logValidationErrorsBilling()"
placeholder="Search Address">

<input *ngIf="isManualLookUpPay" id="addressLine1Billing"

type="text" class="form-control"
formControlName="addressLine1Billing"
(blur)="logValidationErrorsBilling()"
placeholder="Ender Address">

<span style="color:#FF0000;font-size: 12px;display: inherit;"

*ngIf="showErrorGoogleMapPayment">
Please select more specific address! e.g. street, route, city,
state and country
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.addressLine1Billing">
{{formErrorsBilling.addressLine1Billing}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label formLabel"
for="addressLine2Billing">Address Line 2</label>
<div class="customerInput">
<input id="addressLine2Billing" type="text" class="form-control"
placeholder="Enter unit no"
formControlName="addressLine2Billing"
(blur)="logValidationErrorsBilling()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.addressLine2Billing">
{{formErrorsBilling.addressLine2Billing}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="cityBilling">City<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="cityBilling" type="text" class="form-control"
placeholder="Enter City"
(blur)="logValidationErrorsBilling()"
formControlName="cityBilling">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.cityBilling">
{{formErrorsBilling.cityBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
 <label class="formLabel" for="countryBilling">Country <span
style="color:#F85359">*</span></label>
<div class="customerInput">
<!-- <input id="countryBilling" type="text" class="form-
control" placeholder="Enter Country"
formControlName="countryBilling" > -->
<span class="rowSelect">
<select class="custom-select" id="countryBilling"
formControlName="countryBilling"
(change)="unsetState($event,'pay')"
(blur)="logValidationErrorsBilling()">
<option class="dropdown-item" disabled value="">Select
Country</option>
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode"> {{country.countryName}}
</option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.countryBilling">
{{formErrorsBilling.countryBilling}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="postalCodeBilling">Zip / Postal Code<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="postalCodeBilling" type="text" class="form-
control" formControlName="postalCodeBilling"
(blur)="logValidationErrorsBilling()" placeholder="Enter
Zip / Postal Code">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.postalCodeBilling">
{{formErrorsBilling.postalCodeBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="formLabel" for="stateBilling">State / Province
<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<!-- <input id="stateBilling" type="text" class="form-
control" placeholder="Enter State"
formControlName="stateBilling" > -->
<span class="rowSelect">
<select class="custom-select" id="stateBilling"
formControlName="stateBilling"
 (blur)="logValidationErrorsBilling()">
<option class="dropdown-item" disabled value="">State /
Province</option>
<option class="dropdown-item" *ngFor="let state of
stateArrayPayment" [value]="state.code">
{{state.name}} </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.stateBilling">
{{formErrorsBilling.stateBilling}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="contactNameBilling">Contact First Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="contactNameBilling" type="text" class="form-control"
placeholder="Enter First name"
formControlName="contactNameBilling"
(input)="logValidationErrorsBilling()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.contactNameBilling">
{{formErrorsBilling.contactNameBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label class="control-label formLabel"
for="contactLastNamebilling">Contact Last Name<span
style="color:#F85359">*</span></label>
<div class="customerInput">
<input id="contactLastNamebilling" type="text" class="form-
control" placeholder="Enter Last Name"
formControlName="contactLastNamebilling"
(blur)="logValidationErrorsBilling()">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.contactLastNamebilling">
{{formErrorsBilling.contactLastNamebilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="formLabel" for="emailBilling">Email Address <span
style="color:#F85359">*</span></label>
 <div class="customerInput">
<input id="emailBilling" type="text" class="form-control"
placeholder="Enter Email Address"
formControlName="emailBilling"
(blur)="logValidationErrorsBilling()"
(input)='checkDataIsAlreadyPresentOrNot()'>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.emailBilling">
{{formErrorsBilling.emailBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="formLabel" for="attentionBilling">Attention </label>
<div class="customerInput">
<input id="attentionBilling" type="text" class="form-control"
placeholder="Enter Attention"
formControlName="attentionBilling">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.attentionBilling">
{{formErrorsBilling.attentionBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel" for="phoneNoBilling">Phone
Number <span
style="color:#F85359">*</span></label>
<div class="customerInput d-flex">
<span style="width: 40%;min-width: 85px" class="rowSelect">
<!-- <select style="font-size: 14px !important;padding: 5px
10px 5px 5px;" formControlName="phoneNoCode"
class="custom-select" id="country">
<option class="dropdown-item" *ngFor="let country of
countryData.success"
[value]="country.countryCode"> {{country.countryCode}}
({{country.countryPhCode}})</option>
</select> -->
<ng-select class="flagOption" [items]="countryData.success"
bindLabel="countryCode"
bindValue="countryCode" [searchable]="false"
[clearable]="false" formControlName="phoneNoCode">
<ng-template ng-label-tmp let-item="item">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 6px;font-size:
14px;color: #7D7D7E;">{{item.countryPhCode
? '('+item.countryPhCode+')':'' }}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="15" width="15"
src="assets/img/common/{{item.countryCode}}.svg" />
<b style="font-weight: 400;margin-left: 10px;font-size:
14px;">({{item.countryPhCode}})</b>
</ng-template>
 </ng-select>
</span>
<input id="phoneNoBilling" type="text" class="form-control"
formControlName="phoneNoBilling"
(blur)="logValidationErrorsBilling()">
</div>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.phoneNoBilling">
{{formErrorsBilling.phoneNoBilling}}
</span>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="phoneExtBilling">Ext</label>
<div class="customerInput">
<input id="phoneExtBilling" type="text" class="form-control"
formControlName="phoneExtBilling">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.phoneExtBilling">
{{formErrorsBilling.phoneExtBilling}}
</span>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-7">
<div class="form-group">
<label class="control-label formLabel" for="faxNoBilling">Fax
Number</label>
<div class="customerInput">
<input id="faxNoBilling" type="text" class="form-control"
formControlName="faxNoBilling">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.faxNoBilling">
{{formErrorsBilling.faxNoBilling}}
</span>
</div>
<!-- <span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrors?.phoneNo">
{{formErrors.phoneNo}}
</span> -->
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="form-group">
<label class="control-label formLabel"
for="faxPrefixBilling">Prefix</label>
<div class="customerInput">
<input id="faxPrefixBilling" type="text" class="form-control"
formControlName="faxPrefixBilling">
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.faxPrefixBilling">
{{formErrorsBilling.faxPrefixBilling}}
</span>
</div>
</div>
</div>
</div>
 </div>
<div *ngIf="!isContactEdit" class="col-sm-12 col-lg-4">
<div style="display: flex;flex-direction: column;width: 100%;">
<div>
<label class="formLabel" for="statusBilling">Status </label>
</div>
<div class="form-group">
<span class="rowSelect">
<select class="custom-select" id="statusBilling"
formControlName="statusBilling"
(blur)="logValidationErrorsBilling()">
<option class="dropdown-item" value=""> Select </option>
<option class="dropdown-item" value="true"> Active </option>
<option class="dropdown-item" value="false">Inactive </option>
</select>
</span>
<span style="color:#FF0000;font-size: 12px;"
*ngIf="formErrorsBilling?.statusBilling">
{{formErrorsBilling.statusBilling}}
</span>
</div>
</div>
</div>
<!-- <div class="col-sm-12 col-lg-8">
<div class="d-flex align-items-center h-100">
<input id="checkBoxDefaultLocation" type="checkbox"
formControlName="defaultPayment" />
<label for="checkBoxDefaultLocation" style="margin-left: 5px;margin-
bottom: 0;"
class="control-label formLabel">Set as the default payment location
for all orders</label>
</div>
</div> -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-cancel" (click)="d('Cancel
click')">Cancel</button>
<button type="button" style="padding: 0px 7px; width: 90px;" class="btn btn-
color"
(click)="paymentForm.valid && !dataPresentInBilling ? c('Save click') :
submitClickedPaymentShowError()">save</button>
</div>
</form>
</ng-template>

<!-- End modal for Paymnet form ********************* *********************

********************* ********************* *********************-->

<!-- Modal for confirm ********************* *********************

********************* ********************* *********************-->

<ng-template #contentWarn let-modal>

<div class="save_fab save_conf">
<div class="row" style="margin-top: 30px; ">
<div class="col-12 text-center">
<!-- <h5 style="margin-top: 5px !important; font-size: 18px !important;
font-weight: 600 !important; font-family: poppins,sans-serif !important;">BOOK
image</h5> -->
 <img style="padding-top: 10px;" src="assets/img/common/COntract2.svg"
alt="">
</div>

</div>
<div class="row">
<div class="col-12 text-center"
style="font-size: 16px; font-weight: 500; font-family: poppins,sans-serif;
color: #303447;">
confirm want to remove ?
</div>
</div>
<div class="row mt-5 ml-0 mr-0"
style="background-color: white;display: flex;align-items: center;justify-
content: end;width: 90%;margin-bottom: 10px;">
<div class="col12">
<button
style="border: none !important; background-color: white !important;font-
weight: 500;font-size: 14px; font-family: poppins,sans-serif;color: #303447; "
(click)="modal.dismiss('Cancel click')">Cancel</button>
<button
style="border: 1px solid #FC9929; background-color: #FC9929; margin-left:
8px; padding: 3px 18px;font-size: 14px; font-weight: 500; font-family:
poppins,sans-serif; color: white;"
(click)="modal.close('Save click')">Yes</button>
</div>
</div>
</div>
</ng-template>

<!-- End Modal for confirm ********************* *********************

********************* ********************* *********************-->

<!-- testing forms validation table for developers(no use in ui) -->
<!-- <table style="margin-top: 2rem;" border="1">
<tr>
<th style="padding:10px">FormGroup</th>
<th style="padding:10px">Form control (name)</th>
</tr>
<tr>
<td style="padding: 10px;">
touched: {{customerForm.touched}}
<br />
valid :{{customerForm.valid}}
<br />
dirty :{{customerForm.dirty}}
<br />
FormValues :{{customerForm.value | json}}
<br />
</td>
<td style="padding: 10px;">
touched: {{customerForm.get('customerName').touched}}
<br />
valid :{{customerForm.get('customerName').valid}}
<br />
dirty :{{customerForm.get('customerName').dirty}}
<br />
name value :{{customerForm.get('customerName').value}}
 </td>
</tr>
</table> -->
...................
new order.html:
<div style="position: relative">
<div class="container-fluid p-0 topTitleHeader">
<div
class="col-12 p-0 d-flex flex-wrap align-content-between"
style="
border-bottom: 1px solid #c4cdd5;
background-color: #f5f6fa;
padding: 18px 25px 0 25px !important;
"
>
<div class="row" style="width: 100%">
<div
class="p-0 d-flex flex-wrap align-items-center"
style="
width: 100%;
color: #354052;
text-decoration: none;
cursor: pointer;
"
>
<div class="d-flex align-items-center">
<img
class="goBackIcon"
src="assets/img/common/fi-rr-arrow-small-left.svg"
alt=""
(click)="confirmModalOpen()"
/>
<h1 class="screen-title m-0">{{ screenTitle }}</h1>
</div>
<div class="stepsCounterBox">STEP 1 OF 4</div>
</div>
</div>
<div
class="row d-flex flex-nowrap horizontalScroll"
style="white-space: nowrap; margin-top: 15px !important"
>
<h2 class="step-tab active">Order Details</h2>
<h2 class="step-tab">Carrier Contract</h2>

<h2 class="step-tab">Payment</h2>
<h2 class="step-tab">Documents</h2>
</div>
</div>
</div>
<div class="container-fluid p-0 step1Body">
<form [formGroup]="orderDetailForm">
<div class="customerDetailsBox">
<h3 class="customerDetailHeading">Customer Details</h3>
<div class="row align-items-end">
<div class="col-6 leftDetailBox pl-0">
<div class="row justify-content-between">
<div class="col-6 pl-0">
<div style="margin-bottom: 24px" #custoDropDown>
<label for="searchCustomer"
>Customer<span style="color: #f85359">*</span></label
>
<div style="position: relative">
<div class="search-dropdown" [ngClass]="{ open: shown }">
<div class="search-dropdown__btn" (click)="show()">
<img
style="height: 15px; margin-left: 4px"
src="/assets/img/common/search-icon.svg"
alt=""
/>
<span style="margin-left: 20px">{{
selectedValue
}}</span>
</div>
<div class="search-dropdown__dropdown">
<input
class="search-dropdown__dropdown__search"
type="text"
placeholder="Search Customer"
name="searchInpit"
id="searchInpit"
formControlName="searchCustomer"
#searchElementInput
autocomplete="off"
/>
<div class="search-dropdown__dropdown__scroller">
<div
class="search-dropdown__dropdown__item"
*ngFor="let customer of carrierDetailList[0]"
[ngClass]="
customer.customer_name == selectedValue
? 'active-customer-item'
: ''
"
(click)="selectCustomer(customer)"
>
{{
customer.customer_name
? customer.customer_name
: "--"
}}
</div>
<div
class="search-dropdown__dropdown__msg text-muted"
*ngIf="carrierDetailList[0]?.length == 0"
>
No items found
</div>
</div>
</div>
</div>
</div>
<div
*ngIf="
orderDetailForm.get('searchCustomer').invalid &&
(orderDetailForm.get('searchCustomer').dirty ||
orderDetailForm.get('searchCustomer').touched)
"
 style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
orderDetailForm.get('searchCustomer').errors.required
"
>
Customer needs to be selected.
</div>
</div>
</div>
</div>
<div class="col-5 pl-0">
<div style="margin-bottom: 24px" #custoDropDown>
<label for="searchCustomer"
>Probill Number<span style="color: #f85359">*</span></label
>
<div style="position: relative">
<select
*ngIf="prBillDrpDwnActive"
disabled
name="proBill"
id="proBill"
formControlName="currentProbill"
(change)="onproBillChange()"
>
<option value="" aria-selected="true" selected>
Select Probill
</option>
<option
class="search-dropdown__dropdown__item"
value="{{ item.id }}"
*ngFor="let item of probillList"
>
{{ item.probillName }}
</option>
</select>
<select
*ngIf="!prBillDrpDwnActive"
name="proBill"
id="proBill"
formControlName="currentProbill"
(change)="onproBillChange()"
>
<option
class="search-dropdown__dropdown__item"
value="{{ item.id }}"
*ngFor="let item of generatedProbillNo"
>
{{ item.probillNumber }}
</option>
</select>
</div>
<div
*ngIf="
orderDetailForm.get('searchCustomer').invalid &&
 (orderDetailForm.get('searchCustomer').dirty ||
orderDetailForm.get('searchCustomer').touched)
"
style="color: red"
class="error"
></div>
</div>
</div>
<div class="col-1 m-0 p-0">
<div style="margin-bottom: 24px" #custoDropDown>
<label for="searchCustomer"
>&nbsp;<span style="color: #f85359"></span
></label>
<div class="d-flex align-items-center">
<img
src="assets/img/common/probill_or.png"
class="dropdown-toggle"
data-toggle="dropdown"
class="text-center acceserialplus"
style="margin-right: 10px; width: 32px !important"
/>

<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
multiple
style="
width: 250px !important;
height: 200px;
overflow-y: auto;
"
*ngIf="isFormValid()"
>
<a
*ngFor="let key of probillList; let j = index"
class="dropdown-item"
style="line-height: 35px !important"
(click)="onCreateProbill(key)"
>{{ key.probillName }}</a
>
</div>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 24px">
<label for="billTo"
>Bill To<span style="color: #f85359">*</span></label
>
<select
name="billTo"
id="billTo"
(change)="selectBillTo($event.target.value)"
formControlName="billTo"
>
<option value="">Select Bill To</option>
<option
value="{{ bill.billing_address_id }}"
*ngFor="let bill of billingLocation"
 >
{{ bill.company_name }}
</option>
</select>
<div
*ngIf="
orderDetailForm.get('billTo').invalid &&
(orderDetailForm.get('billTo').dirty ||
orderDetailForm.get('billTo').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="orderDetailForm.get('billTo').errors.required"
>
Bill To is required.
</div>
</div>
</div>
<div
class="row justify-content-between"
style="margin-bottom: 24px"
>
<div class="col-6 pl-0">
<label for="callersName">Callers Name</label>
<input
type="text"
id="callersName"
formControlName="callersName"
placeholder="Enter Callers Name"
/>
<!-- <div
*ngIf="
orderDetailForm.get('callersName').invalid &&
(orderDetailForm.get('callersName').dirty ||
orderDetailForm.get('callersName').touched)
"
style="color: red"
class="error" -->
<!-- > -->
<!-- <div
class="error"
style="color: red !important"
*ngIf="orderDetailForm.get('callersName').errors.required"
>
Callers Name is required.
</div> -->
<!-- </div> -->
</div>
<div class="col-6 pr-0">
<label for="poNumber"
>P.O. Number<span style="color: #f85359">*</span></label
>
<input
type="text"
id="poNumber"
 formControlName="poNumber"
placeholder="Enter P.O. Number"
/>
<div
*ngIf="
orderDetailForm.get('poNumber').invalid &&
(orderDetailForm.get('poNumber').dirty ||
orderDetailForm.get('poNumber').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="orderDetailForm.get('poNumber').errors.required"
>
P.O. Number is required.
</div>
</div>
</div>
</div>
</div>
<div class="col-6 rightDetailBox pr-0">
<div style="padding-left: 33px; margin-bottom: 50px">
<div
class="row"
style="margin-bottom: 9px !important; position: relative"
>
<div class="col-12 p-0 d-flex">
<h6 style="font-weight: 500">
Available Credit :
<span class="p-1"
><img
height="15"
width="15"
src="assets/img/common/CA.svg"
/>
CAD $
{{
availableCreditLimitInCAD
? availableCreditLimitInCAD
: "0.00"
}}</span
>/<span class="p-1"
><img
height="15"
width="15"
src="assets/img/common/US.svg"
/>
USD $
{{
availableCreditLimitInUSD
? availableCreditLimitInUSD
: "0.00"
}}</span
>
</h6>
</div>
 <div class="col-12 p-0 d-flex mt-2">
<h6 style="font-weight: 500">
Credit Disabled :
<span class="p-1">
<input
type="checkbox"
style="height: 16px; width: 16px"
[checked]="isCreditDisabled"
disabled
name="enableCreditControl"
id="enableCreditControl"
/></span>
</h6>
</div>
</div>
</div>
<div style="padding-left: 33px">
<div
class="row"
style="margin-bottom: 9px !important; position: relative"
>
<div class="col-12 p-0 d-flex">
<h6 style="font-weight: 500; width: 150px">
Primary Contact:
</h6>
{{ primaryContact ? primaryContact : "--" }}
</div>
<img
src="/assets/img/default-user-dark.png"
alt=""
style="
height: 22px;
position: absolute;
left: -28px;
top: 2px;
"
/>
</div>
<div class="row" style="margin-bottom: 9px !important">
<div class="col-12 p-0 d-flex">
<h6 style="font-weight: 500; width: 150px">Phone</h6>
{{ primaryPhone ? primaryPhone : "--" }}
</div>
</div>
<div class="row">
<div class="col-12 p-0 d-flex">
<h6 style="font-weight: 500; width: 150px">Email</h6>
{{ primaryEmail ? primaryEmail : "--" }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="addNewPackageFormOuterDiv">
<div class="addNewPackageMainDiv">
<div
class="d-flex justify-content-between"
style="flex-flow: column; height: 100%"
>
<div>
<div class="addNewPackageContentBody">
<div>
<!-- <h2>Loaded</h2> -->
<h2 class="m-0 shmtHeading">Shipment Mode</h2>
<div class="shmtModesWrapper row">
<div
class="selection-wrapper"
*ngFor="
let shpmntModePkgType of shpmntModePkgTypeData;
let i = index
"
(click)="selectShmt(i, shpmntModePkgType)"
>
<div
[ngClass]="
shmtModeSelectedArr.includes(i)
? 'selected-item'
: 'select-item'
"
>
<img
[src]="
'assets/img/common/shmt/' +
shpmntModePkgType.styleCode +
'.svg'
"
alt=""
/>
<p>{{ shpmntModePkgType.shippingMode }}</p>
</div>
</div>
</div>
</div>
<h2
*ngIf="!fullTruckLoadSelected"
class="m-0 pkgHeading"
style="margin-top: 40px !important"
>
Package Type
</h2>
<div
*ngIf="!isShmtModeSelected && !fullTruckLoadSelected"
style="
color: #354052;
font-size: 14px;
line-height: 21px;
font-weight: 400;
font-style: italic;
margin-top: 24px;
"
>
Select a shipment mode first
</div>
<div *ngIf="isShmtModeSelected">
<div class="pkgTypesWrapper row">
<div
class="child-selection-wrapper"
 *ngFor="let pkgType of pkgTypes; let i = index"
(click)="selectPkgType(i, pkgType)"
>
<div
class="child-select-item"
[ngClass]="
pkgTypeSelectedArr.includes(i)
? 'child-selected-item'
: 'child-select-item'
"
>
<ng-container *ngIf="shmtModeCourier">
<img
[src]="
'assets/img/common/pkg/' +
pkgType.styleCode +
'.svg'
"
alt="{{ pkgType.packagingName }}"
style="height: 50px"
/>
<p style="margin-top: 5px !important">
{{ pkgType.packagingType }}
</p>
</ng-container>
<ng-container *ngIf="!shmtModeCourier">
<img
[src]="
'assets/img/common/pkg/' +
pkgType.packagingCode +
'.svg'
"
alt="{{ pkgType.packagingName }}"
style="height: 50px"
/>
<p style="margin-top: 5px !important">
{{ pkgType.packagingName }}
</p>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="logisticsOuterBox">
<h3 class="logisticsHeading m-0">Logistics</h3>
<div class="row">
<div class="col-6 leftBox" style="padding: 25px 40px 30px 19px">
<div class="shipperDataBox">
<h4 style="margin-bottom: 20px">
Shipper
<img
src="/assets/img/Switch-Vertical.svg"
alt=""
style="height: 15px; width: auto"
 />
</h4>
<div
formArrayName="shippers"
*ngFor="
let individualShipper of orderDetailForm.get('shippers')
?.controls;
let i = index
"
style="display: flex"
>
<div
style="width: 38px"
[ngStyle]="{ 'margin-top': i + 1 > 1 ? '40px' : '0px' }"
>
<div
style="
height: 100%;
text-align: center;
margin-right: 15px;
color: #ced0da;
"
>
<img
src="/assets/img/avatar.png"
alt=""
style="width: 22px; height: auto; margin-bottom: 12px"
/>
<br />|<br />|<br />|<br />|<br />|<br />|<br />|<br />|<br />|
<br />|<br />|<br />|
</div>
</div>
<div
class="shipperDetail"
style="width: 100%"
[ngStyle]="{ 'margin-top': i + 1 > 1 ? '40px' : '0px' }"
>
<div class="addressBox" style="margin-bottom: 25px">
<div
class="d-flex flex-wrap justify-content-between align-items-
center"
>
<h5 class="shipperDetail-subHeading">
{{ i + 1 != 1 ? i + 1 : ""
}}{{
i + 1 == 1
? ""
: i + 1 == 2
? "nd"
: i + 1 == 3
? "rd"
: "th"
}}
Shipper<span style="color: #f85359">*</span>
<span>
<img
*ngIf="
orderDetailForm.get('shippers').value.length == 1
"
 src="/assets/img/circle-minus-outline_minor.svg"
class="m-0 p-0"
style="cursor: pointer; pointer-events: none"
alt=""
/>
<img
*ngIf="
orderDetailForm.get('shippers').value.length != 1
"
src="/assets/img/circleminus.svg"
class="m-0 p-0"
style="cursor: pointer"
alt=""
(click)="
deleteShipperConsignee(
'shipper',
i,
confirmDeleteShipperConsignee
)
"
/>
</span>
</h5>

<div class="text-center d-flex align-items-center">

<span
style="
color: #354052;
font-size: 14px;
font-weight: 500;
"
[ngClass]="
!isAddressBookShipper.includes(i)
? 'dark-text'
: 'grey-text1'
"
>Google Maps</span
>
<img
src="/assets/img/common/google-maps.svg"
class="location_icon m-1 text-center"
style="
width: auto;
height: 15px;
margin-right: 9px !important;
"
/>
<span class="d-inline pt-0 pb-0 m-0">
<div class="custom-control custom-switch">
<!-- <input class="custom-control-input customtoggle"
type="checkbox" formControlName="shipperAddressBook" (click)="clickEventShipper()"
(change)="checkshipperAddressBook()" id="shipperAddrBook"
#flexSwitchCheckChecked2 /> -->
<input
class="custom-control-input customtoggle"
type="checkbox"
(click)="clickEventShipper(i)"
[checked]="isAddressBookShipper.includes(i)"
(change)="checkshipperAddressBook(i)"
 id="shipperAddrBook{{ i }}"
#flexSwitchCheckChecked2
/>
<label
class="custom-control-label"
for="shipperAddrBook{{ i }}"
style="
font-family: 'Roboto' !important;
font-size: 14px;
"
></label>
</div>
</span>
<span
style="
color: #354052;
font-size: 14px;
font-weight: 500;
"
[ngClass]="
isAddressBookShipper.includes(i)
? 'dark-text'
: 'grey-text1'
"
>Manual Look Up
</span>
</div>
</div>
<!-- Below Code is for Google Maps and Manual look up
functionality in address fields -->
<div
*ngIf="!shearchaddress.includes(i)"
class="dropdown googleLocations"
>
<input
style="
width: 100%;
font-size: 16px !important;
border-radius: 0 !important;
"
#addressInput
class="form-control m-0"
ngx-google-places-autocomplete
#placesRef="ngx-places"
[formControl]="individualShipper.get('fullAddr')"
(onAddressChange)="handleAddressChange($event, i)"
placeholder="Enter Address"
/>
<div
*ngIf="
individualShipper.get('fullAddr').invalid &&
(individualShipper.get('fullAddr').dirty ||
individualShipper.get('fullAddr').touched)
"
style="color: red"
class="error"
>
<div
class="error"
 style="color: red !important"
*ngIf="
individualShipper.get('fullAddr').errors.required
"
>
Shipper Address is required.
</div>
</div>
</div>
<div
*ngIf="shearchaddress.includes(i)"
class="dropdown manualLookup"
>
<input
type="text"
class="form-control m-0"
autocomplete="Off"
[formControl]="individualShipper.get('fullAddr')"
style="
width: 100%;
font-size: 16px !important;
margin: 0 !important;
border-radius: 0 !important;
"
(keyup)="selectShipperAddress($event.target.value)"
class="form-control dropdown-toggle"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
value=""
placeholder="Enter Address"
required
/>
<div
class="dropdown-menu selectacontactdrp"
aria-labelledby="dropdownMenuButton"
>
<div class="add_new_contact">{{ found }}</div>
<div
*ngFor="let a of addressData"
(click)="getCompanyDetails(i, a.companyId, 'start')"
class="dropdown-item row"
style="flex-wrap: nowrap"
>
<span>
{{ a?.companyName
}}{{
a?.fullAddress
? a?.fullAddress
: a?.streetLine1 +
", " +
a?.streetLine2 +
", " +
a?.zipcode +
", " +
a?.city +
",
" +
 a?.province +
", " +
a?.country
}}
</span>
</div>
</div>
<div
*ngIf="
individualShipper.get('fullAddr').invalid &&
(individualShipper.get('fullAddr').dirty ||
individualShipper.get('fullAddr').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualShipper.get('fullAddr').errors.required
"
>
Shipper Address is required.
</div>
</div>
</div>
<!-- Above Code is for Google Maps and Manual look up
functionality in address fields -->
</div>
<div
*ngIf="isAddressBookShipper.includes(i)"
class="typeList row"
style="margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">Country</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualShipper.get('country')"
placeholder="Select Address"
/>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">State / Province</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualShipper.get('state')"
placeholder="Select Address"
 />
</div>
</div>
<div
class="typeList row"
*ngIf="isAddressBookShipper.includes(i)"
style="margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">City</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualShipper.get('city')"
placeholder="Select Address"
/>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">
Zip / Postal Code
</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualShipper.get('zipCode')"
placeholder="Select Address"
/>
</div>
</div>
<div class="typeList row" style="margin-top: 25px !important">
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">
Type<span style="color: #f85359">*</span>
</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="shipperType"
id="shipperType"
(change)="setBusinessType(i, $event)"
[formControl]="individualShipper.get('shipperAddrType')"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>Select One</ng-option
>
<ng-option
[value]="location.locId"
*ngFor="let location of businessTypeArray"
>
{{ location.locType }}
 </ng-option>
</ng-select>
<div
*ngIf="
individualShipper.get('shipperAddrType').invalid &&
(individualShipper.get('shipperAddrType').dirty ||
individualShipper.get('shipperAddrType').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualShipper.get('shipperAddrType').errors
.required
"
>
Address Type is required.
</div>
</div>
</div>

<div class="col-sm-12 col-md-6 p-0">

<h5 class="shipperDetail-subHeading">
Pickup Date<span style="color: #f85359">*</span>
</h5>
<div class="styleDateFlatPicker" style="width: 100%">
<input
class="form-control datepickerStyleInput"
style="
cursor: pointer;
border-radius: 0;
background: transparent
linear-gradient(0deg, #f2f4f7 0%, #ffffff 100%) 0%
0% no-repeat padding-box;
border: 1px solid #ced0da;
"
placeholder="Select Date"
name="shipperPickupDate"
readonly="true"
(click)="df.toggle()"
(dateSelect)="pickupdate('shipper')"
[formControl]="
individualShipper.get('shipperPickupDate')
"
ngbDatepicker
#df="ngbDatepicker"
firstDayOfWeek="7"
/>
</div>
<div
*ngIf="
individualShipper.get('shipperPickupDate').invalid &&
(individualShipper.get('shipperPickupDate').dirty ||
individualShipper.get('shipperPickupDate').touched)
"
style="color: red"
 class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualShipper.get('shipperPickupDate').errors
.required
"
>
Pickup Date is required.
</div>
</div>
</div>
</div>
<div class="typeList row" style="margin-top: 25px !important">
<div class="col-12 pl-0">
<h5 class="shipperDetail-subHeading">
Pickup<span style="color: #f85359">*</span>
</h5>
<ng-select
class="form-control form-control-sm select-arrow"
style="width: 102%"
name="shipperType"
id="shipperType"
[formControl]="
individualShipper.get('pickupDeliveryInfoId')
"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>Select One</ng-option
>
<ng-option
[value]="location.id"
*ngFor="let location of pickUpList"
>
{{ location.instructionName }}
</ng-option>
</ng-select>
</div>
<div
*ngIf="
individualShipper.get('pickupDeliveryInfoId').invalid &&
(individualShipper.get('pickupDeliveryInfoId').dirty ||
individualShipper.get('pickupDeliveryInfoId').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualShipper.get('pickupDeliveryInfoId').errors
.required
"
>
 Shipper pickup is required.
</div>
</div>
</div>
<div
class="typeList row"
style="margin-bottom: 25px; margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">
Pick-up From Time
</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="PickupFrom"
id="PickupFrom"
(change)="setPickUpTime(i, $event, 'from', 'shipper')"
[formControl]="
individualShipper.get('shipperPickupFromTime')
"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>--Select Hours--</ng-option
>
<ng-option
*ngFor="let hr of shipingHours"
[value]="hr.pickupId"
[disabled]="hr.showDisable"
>
<span>{{ hr.pickupTime }}</span>
</ng-option>
</ng-select>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">Pick-up To Time</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="PickupFrom"
id="PickupTo"
(change)="setPickUpTime(i, $event, 'to', 'shipper')"
[formControl]="
individualShipper.get('shipperPickupToTime')
"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>--Select Hours--</ng-option
>
<ng-option
*ngFor="let hr of shipingHours"
[value]="hr.pickupId"
[disabled]="hr.showDisable"
>
{{ hr.pickupTime }}
</ng-option>
</ng-select>
 </div>
</div>
<div class="accessorialWrapper">
<div>
<h5 class="shipperDetail-subHeading">Accessorial</h5>
<div class="d-flex align-items-center">
<img
src="assets/img/common/plus.svg"
class="dropdown-toggle"
data-toggle="dropdown"
class="text-center acceserialplus"
style="margin-right: 10px"
/>
<span
class="acessorialText"
*ngIf="
accessorialsData.length !== 0
? accessorialsData[i]
? accessorialsData[i].length !== 0
? false
: true
: true
: true
"
>{{ accesserialLabelStart }}</span
>
<div
class="accContainer"
style="display: flex; flex-wrap: wrap"
>
<div
*ngFor="
let key of accessorialsData[0];
let j = index
"
style="
background-color: #e2e7ee;
border: 1px solid #d5dce6;
font-size: 12px;
font-weight: 500;
color: #354052;
margin-right: 10px;
margin-bottom: 6px;
padding: 3px 7px;
"
>
<span
class="accessorialChip"
style="
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
word-break: break-all;
"
>
{{ key.accessorial_name }}
<span
class="acceserialplus"
 style="
display: flex;
justify-content: end;
cursor: pointer;
"
(click)="
removeRemoveAccessorial(
j,
i,
key.accessorial_id
)
"
>×</span
>
</span>
<div class="clear" *ngIf="i == 3"></div>
</div>
</div>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
multiple
style="
width: 75%;
max-height: 190px;
overflow-y: auto;
"
>
<a
*ngFor="
let key of accessorailList[0];
let j = index
"
class="dropdown-item"
(click)="selectAccessorial(i, key)"
>{{ key.serviceName }}</a
>
</div>
</div>
<!-- <div class="error" style="color: red !important;"
*ngIf="!individualShipper.get('shipperAddrType').errors?.required &&
individualShipper.get('extraServices').value.length == 0">
Accessorials are required.
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="consigneeDataBox" style="margin-top: 30px">
<h4 style="margin-bottom: 20px">
Consignee
<img
src="/assets/img/Switch-Vertical.svg"
alt=""
style="height: 15px; width: auto"
/>
</h4>
<div
 formArrayName="consignees"
*ngFor="
let individualConsignee of orderDetailForm.get('consignees')
?.controls;
let i = index
"
style="display: flex"
>
<div
style="width: 38px"
[ngStyle]="{ 'margin-top': i + 1 > 1 ? '40px' : '0px' }"
>
<div
style="
height: 100%;
text-align: center;
margin-right: 15px;
color: #ced0da;
"
>
<img
src="/assets/img/avatar.png"
alt=""
style="width: 22px; height: auto; margin-bottom: 12px"
/>
<br />|<br />|<br />|<br />|<br />|<br />|<br />|<br />|<br />|
<br />|<br />|<br />|
</div>
</div>
<div
class="consigneeDetail"
style="width: 100%"
[ngStyle]="{ 'margin-top': i + 1 > 1 ? '40px' : '0px' }"
>
<div class="addressBox" style="margin-bottom: 25px">
<div
class="d-flex flex-wrap justify-content-between align-items-
center"
>
<h5 class="consigneeDetail-subHeading">
{{ i + 1 != 1 ? i + 1 : ""
}}{{
i + 1 == 1
? ""
: i + 1 == 2
? "nd"
: i + 1 == 3
? "rd"
: "th"
}}
Consignee<span style="color: #f85359">*</span>
<span>
<img
*ngIf="
orderDetailForm.get('consignees').value.length ==
1
"
src="/assets/img/circle-minus-outline_minor.svg"
class="m-0 p-0"
 style="cursor: pointer; pointer-events: none"
alt=""
/>
<img
*ngIf="
orderDetailForm.get('consignees').value.length !=
1
"
src="/assets/img/circleminus.svg"
class="m-0 p-0"
style="cursor: pointer"
alt=""
(click)="
deleteShipperConsignee(
'consignee',
i,
confirmDeleteShipperConsignee
)
"
/>
</span>
</h5>

<div class="text-center d-flex align-items-center">

<span
style="
color: #354052;
font-size: 14px;
font-weight: 500;
"
[ngClass]="
!isAddressBookConsignee.includes(i)
? 'dark-text'
: 'grey-text1'
"
>Google Maps</span
>
<img
src="/assets/img/common/google-maps.svg"
class="location_icon m-1 text-center"
style="
width: auto;
height: 15px;
margin-right: 9px !important;
"
/>
<span class="d-inline pt-0 pb-0 m-0">
<div class="custom-control custom-switch">
<!-- <input class="custom-control-input customtoggle"
type="checkbox" formControlName="consigneeAddressBook"
(click)="clickEventShipper()" (change)="checkConsigneeAddressBook()"
id="consigneeAddrBook" #flexSwitchCheckChecked2 /> -->
<input
class="custom-control-input customtoggle"
type="checkbox"
(click)="clickEventConsignee(i)"
(change)="checkConsigneeAddressBook(i)"
[checked]="isAddressBookConsignee.includes(i)"
id="consigneeAddrBook{{ i }}"
 #flexSwitchCheckChecked2
/>
<label
class="custom-control-label"
for="consigneeAddrBook{{ i }}"
style="
font-family: 'Roboto' !important;
font-size: 14px;
"
></label>
</div>
</span>
<span
style="
color: #354052;
font-size: 14px;
font-weight: 500;
"
[ngClass]="
isAddressBookConsignee.includes(i)
? 'dark-text'
: 'grey-text1'
"
>Manual Look Up
</span>
</div>
</div>
<!-- Below Code is for Google Maps and Manual look up
functionality in address fields -->
<div *ngIf="!shearchaddress2.includes(i)" class="dropdown">
<input
style="
width: 100%;
font-size: 16px !important;
border-radius: 0 !important;
"
#addressConsigneeInput
class="form-control m-0"
ngx-google-places-autocomplete
#placesRef="ngx-places"
[formControl]="individualConsignee.get('fullAddr')"
(onAddressChange)="handleConsignee($event, i)"
placeholder="Enter Address"
/>
<div
*ngIf="
individualConsignee.get('fullAddr').invalid &&
(individualConsignee.get('fullAddr').dirty ||
individualConsignee.get('fullAddr').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualConsignee.get('fullAddr').errors.required
"
 >
Consignee Address is required.
</div>
</div>
</div>
<div *ngIf="shearchaddress2.includes(i)" class="dropdown">
<input
type="text"
class="form-control m-0"
autocomplete="Off"
[formControl]="individualConsignee.get('fullAddr')"
style="
width: 100%;
font-size: 16px !important;
margin: 0 !important;
border-radius: 0 !important;
"
(keyup)="selectConsigneeAddress($event.target.value)"
class="form-control dropdown-toggle"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
value=""
placeholder="Enter Address"
required
/>
<div
class="dropdown-menu selectacontactdrp"
aria-labelledby="dropdownMenuButton"
>
<div class="add_new_contact">{{ found2 }}</div>
<div
*ngFor="let a of ConsigneeAddressData"
(click)="getCompanyDetails(i, a.companyId, 'end')"
class="dropdown-item row"
style="flex-wrap: nowrap"
>
<span>
<b>{{ a?.companyName }}</b
>,
{{
a?.fullAddress
? a?.fullAddress
: a?.streetLine1 +
", " +
a?.streetLine2 +
", " +
a?.zipcode +
",
" +
a?.city +
", " +
a?.province +
", " +
a?.country
}}
</span>
</div>
 </div>
<div
*ngIf="
individualConsignee.get('fullAddr').invalid &&
(individualConsignee.get('fullAddr').dirty ||
individualConsignee.get('fullAddr').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualConsignee.get('fullAddr').errors.required
"
>
Consignee Address is required.
</div>
</div>
</div>
<!-- Above Code is for Google Maps and Manual look up
functionality in address fields -->
</div>
<div
class="typeList row"
*ngIf="isAddressBookConsignee.includes(i)"
style="margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">Country</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualConsignee.get('country')"
placeholder="Select Address"
/>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">State / Province</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualConsignee.get('state')"
placeholder="Select Address"
/>
</div>
</div>
<div
class="typeList row"
*ngIf="isAddressBookConsignee.includes(i)"
 style="margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="shipperDetail-subHeading">City</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualConsignee.get('city')"
placeholder="Select Address"
/>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">
Zip / Postal Code
</h5>
<input
type="text"
class="form-control"
style="
border-radius: 0 !important;
pointer-events: none !important;
"
[formControl]="individualConsignee.get('zipCode')"
placeholder="Select Address"
/>
</div>
</div>
<div
class="typeList row"
style="margin-bottom: 25px; margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="consigneeDetail-subHeading">
Type<span style="color: #f85359">*</span>
</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="consigneeType"
id="consigneeType"
[formControl]="
individualConsignee.get('consigneeAddrType')
"
(change)="setBusinessTypeInCon(i, $event)"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>Select One</ng-option
>
<ng-option
*ngFor="let business of businessTypeArray"
[value]="business.locId"
>
{{ business.locType }}
</ng-option>
 </ng-select>
<div
*ngIf="
individualConsignee.get('consigneeAddrType')
.invalid &&
(individualConsignee.get('consigneeAddrType').dirty ||
individualConsignee.get('consigneeAddrType')
.touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualConsignee.get('consigneeAddrType').errors
.required
"
>
Address Type is required.
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="shipperDetail-subHeading">
Delivery Date<span style="color: #f85359">*</span>
</h5>
<div class="styleDateFlatPicker" style="width: 100%">
<input
class="form-control datepickerStyleInput"
style="
cursor: pointer;
border-radius: 0;
background: transparent
linear-gradient(0deg, #f2f4f7 0%, #ffffff 100%) 0%
0% no-repeat padding-box;
border: 1px solid #ced0da;
"
placeholder="Select Date"
name="consigneePickupDate"
readonly="true"
(click)="df.toggle()"
(dateSelect)="pickupdate('consignee')"
[formControl]="
individualConsignee.get('consigneePickupDate')
"
ngbDatepicker
#df="ngbDatepicker"
/>
</div>
<div
*ngIf="
individualConsignee.get('consigneePickupDate')
.invalid &&
(individualConsignee.get('consigneePickupDate')
.dirty ||
individualConsignee.get('consigneePickupDate')
.touched)
 "
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="
individualConsignee.get('consigneePickupDate')
.errors.required
"
>
Delivery Date is required.
</div>
</div>
</div>
</div>
<div class="typeList row" style="margin-top: 25px !important">
<div class="col-12 pl-0">
<h5 class="shipperDetail-subHeading">
Delivery<span style="color: #f85359">*</span>
</h5>
<ng-select
class="form-control form-control-sm select-arrow"
style="width: 102%"
name="shipperType"
id="shipperType"
[formControl]="
individualConsignee.get('pickupDeliveryInfoId')
"
[searchable]="false"
[clearable]="false"
(ngModelChange)="changeDelivery()"
>
<ng-option value="" disabled selected
>Select One</ng-option
>
<ng-option
[value]="location.id"
*ngFor="let location of pickUpListConsignee"
>
{{ location.instructionName }}
</ng-option>
</ng-select>
</div>
<div
*ngIf="
individualConsignee.get('pickupDeliveryInfoId')
.invalid &&
(individualConsignee.get('pickupDeliveryInfoId')
.dirty ||
individualConsignee.get('pickupDeliveryInfoId')
.touched)
"
style="color: red"
class="error"
>
<div
class="error"
 style="color: red !important"
*ngIf="
individualConsignee.get('pickupDeliveryInfoId').errors
.required
"
>
Consignee Delivery is required.
</div>
</div>
</div>
<div
class="typeList row"
style="margin-bottom: 25px; margin-top: 25px !important"
>
<div class="col-sm-12 col-md-6 pl-0">
<h5 class="consigneeDetail-subHeading">Drop From Time</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="PickupFrom"
id="PickupFrom"
(change)="setPickUpTime(i, $event, 'from', 'consignee')"
[formControl]="
individualConsignee.get('consigneePickupFromTime')
"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>--Select Hours--</ng-option
>
<ng-option
*ngFor="let hr of shipingHours"
[value]="hr.pickupId"
[disabled]="hr.showDisable"
>
{{ hr.pickupTime }}
</ng-option>
</ng-select>
</div>
<div class="col-sm-12 col-md-6 p-0">
<h5 class="consigneeDetail-subHeading">Drop To Time</h5>
<ng-select
class="form-control form-control-sm select-arrow"
name="PickupFrom"
id="PickupTo"
(change)="setPickUpTime(i, $event, 'to', 'consignee')"
[formControl]="
individualConsignee.get('consigneePickupToTime')
"
[searchable]="false"
[clearable]="false"
>
<ng-option value="" disabled selected
>--Select Hours--</ng-option
>
<ng-option
*ngFor="let hr of shipingHours"
[value]="hr.pickupId"
[disabled]="hr.showDisable"
 >
{{ hr.pickupTime }}
</ng-option>
</ng-select>
</div>
</div>
<div class="accessorialWrapper">
<div>
<h5 class="consigneeDetail-subHeading">Accessorial</h5>
<div class="d-flex align-items-center">
<img
src="assets/img/common/plus.svg"
class="text-center acceserialplus dropdown-toggle"
style="margin-right: 10px"
data-toggle="dropdown"
/>
<span
class="acessorialText"
*ngIf="
accessorialsDataCon.length !== 0
? accessorialsDataCon[0]
? accessorialsDataCon[0].length !== 0
? false
: true
: true
: true
"
>{{ accesserialLabelStart }}</span
>
<div
class="accContainer"
style="display: flex; flex-wrap: wrap"
>
<div
*ngFor="
let key of accessorialsDataCon[0];
let j = index
"
style="
background-color: #e2e7ee;
border: 1px solid #d5dce6;
font-size: 12px;
font-weight: 500;
color: #354052;
margin-right: 10px;
margin-bottom: 6px;
padding: 3px 7px;
"
>
<span
class="accessorialChip"
style="
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
word-break: break-all;
"
>{{ key.accessorial_name }}
 <span
class="acceserialplus"
style="
display: flex;
justify-content: end;
cursor: pointer;
"
(click)="
removeAccessrialInCon(
j,
i,
key.accessorial_id
)
"
>×</span
>
</span>
<div class="clear" *ngIf="i == 3"></div>
</div>
</div>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
multiple
style="
width: 75%;
max-height: 190px;
overflow-y: auto;
"
>
<a
*ngFor="
let key of accessorailListCon[i];
let j = index
"
class="dropdown-item"
[ngClass]="{ selected: key.isDefault }"
(click)="selectAccessorialInCon(i, key)"
>{{ key.serviceName }}
</a>
</div>
</div>
<!-- <div class="error" style="color: red !important;"
*ngIf="!individualConsignee.get('consigneeAddrType').errors?.required &&
individualConsignee.get('extraServices').value.length == 0">
Accessorials are required.
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="col-6 p-0 logisticsform map-area"
style="background-color: slategray"
>
<agm-map
 [latitude]="0.0"
[longitude]="0.0"
[zoom]="zoom"
[disableDefaultUI]="false"
[fitBounds]="true"
>
<!-- <agm-direction [origin]="origin"
[destination]="destination"></agm-direction> -->
<agm-marker
*ngFor="let shipperMarker of shipperMarkers; let i = index"
[latitude]="shipperMarker.lat"
[longitude]="shipperMarker.lng"
[label]="shipperMarker.label"
[iconUrl]="'/assets/img/google-map-green-marker.png'"
[agmFitBounds]="true"
>
</agm-marker>
<agm-marker
*ngFor="let consigneeMarker of consigneeMarkers; let i = index"
[latitude]="consigneeMarker.lat"
[longitude]="consigneeMarker.lng"
[label]="consigneeMarker.label"
[iconUrl]="'/assets/img/google-map-red-marker.png'"
[agmFitBounds]="true"
>
</agm-marker>
</agm-map>
</div>
</div>
</div>
<div class="shipmentItemsOuterBox row">
<div
class="d-flex align-items-center justify-content-between"
style="
margin-bottom: 0;
padding: 22px 28px;
width: -webkit-fill-available;
flex-wrap: nowrap;
"
>
<div class="d-flex flex-nowrap align-items-center">
<h5 class="m-0 p-0 shpmtItemsHeading" style="width: max-content">
Shipment Items
</h5>
<div
class="text-start m-0 d-flex flex-nowrap"
style="
font-size: 16px;
color: #354052;
font-family: poppins, sans-serif;
font-weight: 500;
margin-left: 35px !important;
height: 20px;
"
>
<div class="d-flex flex-nowrap align-items-center">
<input
type="radio"
value="metric"
 name="unit"
(change)="setUnitValue($event.target.value)"
[checked]="measurementType == 'metric'"
/>
<label
style="
font-size: 16px !important;
margin: 0 35px 0 14px !important;
"
>
Metric
</label>
</div>
<div class="d-flex flex-nowrap align-items-center">
<input
type="radio"
value="imperial"
name="unit"
(change)="setUnitValue($event.target.value)"
[checked]="measurementType == 'imperial'"
/>
<label
style="
font-size: 16px !important;
margin: 0 35px 0 14px !important;
"
>
Imperial
</label>
</div>
</div>
</div>
<div
class="text-center m-0 p-0 align-items-center"
style="margin-left: 35px !important"
>
<button
(click)="addLineShipmentItembyClick()"
class="btn add_item_btn float-right m-0"
>
Add Line Item
</button>
</div>
</div>

<div class="myTable">
<div
class="row shipmentItemsHeadingList"
style="
padding: 20px 15px;
border-top: 1px solid #d7d9db;
border-bottom: 1px solid #d7d9db;
background-color: #f5f6fa;
flex-wrap: nowrap;
"
>
<div scope="col-1" class="package row1">
Package<span style="color: #f85359">*</span>
</div>
 <div scope="col-1" class="quantity row2">
Quantity<span style="color: #f85359">*</span>
</div>
<div scope="col" class="length row3">
Length<span style="color: #f85359">*</span>
<span class="badge badge-secondary">{{
measurementType == "metric" ? "Cm" : "Inch"
}}</span>
</div>
<div scope="col" class="width row4">
Width<span style="color: #f85359">*</span>
<span class="badge badge-secondary">{{
measurementType == "metric" ? "Cm" : "Inch"
}}</span>
</div>
<div scope="col" class="height row5">
Height<span style="color: #f85359">*</span>
<span class="badge badge-secondary">{{
measurementType == "metric" ? "Cm" : "Inch"
}}</span>
</div>
<div scope="col" class="weight row6">
Weight<span style="color: #f85359">*</span>
<span class="badge badge-secondary">{{
measurementType == "metric" ? "Kg" : "Lbs"
}}</span>
</div>
<div scope="col" class="shipment-value row7">
Commodity Description<span style="color: #f85359">*</span>
</div>
<div scope="col" class="shipment-value row8 p-0 m-0">
Shipment Value<span style="color: #f85359">*</span>
<span class="badge badge-secondary"
>{{ setcurrency == "USD" ? "USD" : "CAD" }}
<img
src="../../../../assets/img/common/US.svg"
style="width: 16px !important"
*ngIf="setcurrency == 'USD'" /><img
src="../../../../assets/img/common/CA.svg"
style="width: 16px !important"
*ngIf="setcurrency != 'USD'"
/></span>
</div>
<div scope="col" class="class row9">Class</div>
<div scope="col" class="nmfc row10">NMFC</div>
<div scope="col" class="stackable row11">Stackable</div>
<div scope="col" class="hazmat row12">HazMat</div>
<div scope="col" class="action row13">Action</div>
</div>
<div
class="shpmtItemBody"
*ngFor="
let line of orderDetailForm.get('shipmentItem')?.controls;
let i = index
"
formArrayName="shipmentItem"
>
<div
style="padding: 12px 15px; border-bottom: 1px solid #c4cdd5"
 [formArrayName]="i"
>
<div class="row p-0 shipmentItemsDataFieldsList">
<div class="package row1">
<select
class="form-control form-control-sm custom-select2"
placeholder="Package"
formControlName="packageName"
(change)="setPkgType($event.target.value)"
style="
height: 38px !important;
font-weight: 500 !important;
font-size: 16px;
line-height: 21px;
"
>
<option value="" selected disabled>Select Package</option>
<option
value="{{ item.packagingId }}"
style="font-size: 14px !important"
*ngFor="let item of pkgTypes"
>
{{
shmtModeCourier
? item.packagingType
: item.packagingName
}}
</option>
</select>
<div
*ngIf="
line.get('packageName').invalid &&
(line.get('packageName').dirty ||
line.get('packageName').touched)
"
class="error"
>
<div class="error" style="color: red !important">
{{
line.get("packageName").errors.required &&
selectedShmtModeId == ""
? "Select
Shipment Mode for packages list."
: line.get("packageName").errors.required
? "Package Name is required."
: ""
}}
</div>
</div>
</div>
<div
class="quantity row2"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
 'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
oninput="javascript: if (this.value.length >
this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="5"
min="1"
placeholder="0"
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
formControlName="quantity"
(input)="calculateTotalQuantity('quantity')"
/>
</div>
<div class="p-0" style="height: 100% !important">
<div class="styleButtons">
<span
style="height: 53%"
class="spanPlus"
(click)="increamentByOne(i, 'quantity')"
>+</span
>
<span
style="height: 53%"
class="spanMinus"
(click)="decreamentByOne(i, 'quantity')"
>-</span
>
</div>
</div>
</div>
<div
*ngIf="
line.get('quantity').invalid &&
(line.get('quantity').dirty ||
line.get('quantity').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.required"
>
Quantity is required.
</div>
<div
class="error"
style="color: red !important"
 *ngIf="line.get('quantity').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="length row3"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
(keyup)="getDensity(i)"
oninput="javascript: if (this.value.length >
this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="8"
min="0.1"
placeholder="0.00"
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
formControlName="length"
(input)="calculateTotalQuantity('length')"
/>
</div>
<div class="p-0" style="height: 100% !important">
<div class="styleButtons">
<span
style="height: 53%"
class="spanPlus"
(click)="increamentByOne(i, 'length')"
 >+</span
>
<span
style="height: 53%"
class="spanMinus"
(click)="decreamentByOne(i, 'length')"
>-</span
>
</div>
</div>
</div>
<div
*ngIf="
line.get('length').invalid &&
(line.get('length').dirty || line.get('length').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('length').errors.required"
>
Length is required.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('length').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('length').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('length').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="width row4"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
 line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
style="height: 36px !important"
(keyup)="getDensity(i)"
oninput="javascript: if (this.value.length >
this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="8"
min="0.1"
placeholder="0.00"
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
formControlName="width"
(input)="calculateTotalQuantity('width')"
/>
</div>
<div class="p-0" style="height: 100% !important">
<div class="styleButtons">
<span
style="height: 53%"
class="spanPlus"
(click)="increamentByOne(i, 'width')"
>+</span
>
<span
style="height: 53%"
class="spanMinus"
(click)="decreamentByOne(i, 'width')"
>-</span
>
</div>
</div>
</div>
<div
*ngIf="
line.get('width').invalid &&
(line.get('width').dirty || line.get('width').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('width').errors.required"
>
Width is required.
</div>
<div
class="error"
style="color: red !important"
 *ngIf="line.get('width').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('width').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('width').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="height row5"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
style="height: 36px !important"
(keyup)="getDensity(i)"
oninput="javascript: if (this.value.length >
this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="8"
min="0.1"
placeholder="0.00"
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
formControlName="height"
(input)="calculateTotalQuantity('height')"
/>
</div>
<div class="p-0" style="height: 100% !important">
<div class="styleButtons">
<span
style="height: 53%"
class="spanPlus"
 (click)="increamentByOne(i, 'height')"
>+</span
>
<span
style="height: 53%"
class="spanMinus"
(click)="decreamentByOne(i, 'height')"
>-</span
>
</div>
</div>
</div>
<div
*ngIf="
line.get('height').invalid &&
(line.get('height').dirty || line.get('height').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('height').errors.required"
>
Height is required.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('height').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('height').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('height').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="weight row6"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
 'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
(keyup)="getDensity(i)"
oninput="javascript: if (this.value.length >
this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="8"
min="0.1"
placeholder="per Item"
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
formControlName="weight"
(input)="calculateTotalQuantity('weight')"
/>
</div>
<div class="p-0" style="height: 100% !important">
<div class="styleButtons">
<span
style="height: 53%"
class="spanPlus"
(click)="increamentByOne(i, 'weight')"
>+</span
>
<span
style="height: 53%"
class="spanMinus"
(click)="decreamentByOne(i, 'weight')"
>-</span
>
</div>
</div>
</div>
<div
*ngIf="
line.get('weight').invalid &&
(line.get('weight').dirty || line.get('weight').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('weight').errors.required"
>
Weight is required.
</div>
<div
class="error"
style="color: red !important"
 *ngIf="line.get('weight').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('weight').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('weight').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="shipment-value description row7"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div class="d-flex" style="border: 1px solid #ced0da">
<div class="p-0">
<input
style="
height: 36px !important;
width: 100%;
padding: 0 12px;
border: none;
"
type="text"
formControlName="description"
/>
</div>
</div>
<div
*ngIf="
line.get('description').invalid &&
(line.get('description').dirty ||
line.get('description').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
 *ngIf="line.get('description').errors.required"
>
Description is required.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('description').errors.maxlength"
>
Max 30 characters are allowed.
</div>
</div>
</div>
<div
class="shipment-value row8"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<div
style="
border: 1px solid #ced0da;
padding: 7px 9px;
display: flex;
height: 36px;
position: relative;
"
>
<span style="position: absolute; left: 9px; top: 5px"
>$</span
>
<input
oninput="javascript: if (this.value.length > this.maxLength)
this.value = this.value.slice(0, this.maxLength);"
type="number"
maxlength="10"
min="0.2"
placeholder="0.00"
style="
width: 100%;
padding: 0 12px;
border: none;
outline: none !important;
"
formControlName="shipmentValue"
(input)="calculateTotalQuantity('shipmentValue')"
/>
</div>
<div
*ngIf="
line.get('shipmentValue').invalid &&
(line.get('shipmentValue').dirty ||
 line.get('shipmentValue').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('shipmentValue').errors.required"
>
Shipment Value is required.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('shipmentValue').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('shipmentValue').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('shipmentValue').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="class row9"
[ngStyle]="{
filter:
line.controls.packageName.value == '' || shmtModeCourier
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' || shmtModeCourier
? '0.5'
: '1',
'pointer-events':
line.controls.packageName.value == '' || shmtModeCourier
? 'none'
: ''
}"
>
<select
class="custom-select custom-select2"
placeholder="Class"
#mySelectClass
(change)="customOptionsSelected(mySelectClass.value)"
formControlName="class"
>
 <option value="" disabled></option>
<option
*ngFor="let sc of freightClassObj"
[selected]="classToSet[i]?.freightType == sc.freightType"
[value]="sc.freightType"
>
{{ sc.freightType }}
</option>
</select>
</div>
<div
class="nmfc row10"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<select
class="custom-select custom-select2"
placeholder="NMFC"
formControlName="nmfc"
>
<option>NMFC</option>
</select>
</div>
<div
class="stackable row11"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<input
class="form-check-input stack m-0 p-0"
style="pointer-events: all !important; position: static"
type="checkbox"
formControlName="stackable"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
 />
</div>
<div
class="hazmat row12"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<input
class="form-check-input hazmet m-0 p-0"
style="pointer-events: all !important; position: static"
type="checkbox"
(change)="showHideHazmatOptions(i, $event.target.checked)"
formControlName="hazmat"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
/>
</div>
<div
class="action row13"
[ngStyle]="{
filter:
line.controls.packageName.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.packageName.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.packageName.value == '' ? 'none' : ''
}"
>
<img
*ngIf="
orderDetailForm.get('shipmentItem').value.length == 1
"
src="/assets/img/circle-minus-outline_minor.svg"
class="m-0 p-0"
style="cursor: pointer; pointer-events: none"
alt=""
/>
<img
*ngIf="
orderDetailForm.get('shipmentItem').value.length != 1
"
 src="/assets/img/circleminus.svg"
class="m-0 p-0"
style="cursor: pointer"
alt=""
(click)="removeLineShipmentItem(i)"
/>
</div>
</div>
<div
[ngClass]="'hazmat-options hazmat-' + i"
*ngIf="isHazmatChecked[i]"
>
<div class="dropdown">
<select
class="custom-select2"
style="display: block; width: 107px"
formControlName="hazmatNU"
>
<option value="NU">NU</option>
<option value="UN" selected>UN</option>
<option value="NA">N/A</option>
</select>
</div>
<div class="dropdown">
<div>UN Number</div>
<input
type="text"
style="
width: 131px;
padding: 0.1375rem 1.5rem 0.1375rem 5px !important;
"
maxlength="4"
formControlName="hazmatUNNumber"
(input)="handleInput($event, i)"
/>
</div>
<div class="dropdown">
<div>Proper Shipping Name</div>
<input
type="text"
style="width: 166.95px"
formControlName="hazmatShipperName"
/>
</div>
<div class="dropdown">
<div>Hazard Class</div>
<input
type="text"
style="width: 131px"
maxlength="5"
formControlName="hazmatHazardClass"
/>
</div>
<div class="dropdown">
<div>Package Group</div>
<ng-select
class="custom-select1"
style="
display: block;
 width: 161px;
border: 1px solid #ced0da !important;
height: 38px !important;
padding: 0px !important;
"
[searchable]="false"
[clearable]="false"
formControlName="hazmatPackageGroup"
>
<!-- <ng-option value="" disabled >Select</ng-option> -->
<ng-option
*ngFor="let option of packageGroupOptions"
[value]="option.value"
>
{{ option.label }}
</ng-option>
</ng-select>
</div>
<!-- <div class="dropdown">
<div>Package Group</div>
<select class="custom-select2" style="display:
block;width: 161px;"
formControlName="hazmatPackageGroup">
<option selected
value="select">Select</option>
<option value="na">N/A</option>
<option value="i">I</option>
<option value="ii">II</option>
<option value="iii">III</option>
</select>
</div> -->
<div class="dropdown">
<div>Package Type</div>
<select
class="custom-select2"
style="display: block; width: 161px"
formControlName="hazmatPackageType"
>
<option value="select" selected disabled>Select</option>
<option value="bag">Bag</option>
<option value="bale">Bale</option>
<option value="box">Box</option>
<option value="bucket">Bucket</option>
<option value="bundle">Bundle</option>
<option value="carton">Carton</option>
<option value="case">Case</option>
<option value="crate">Crate</option>
<option value="cylinder">Cylinder</option>
<option value="drums">Drums</option>
<option value="pail">Pail</option>
<option value="reel">Reel</option>
<option value="roll">Roll</option>
<option value="tube-tote">Tube Tote</option>
<option value="tote">Tote</option>
</select>
</div>
</div>
</div>
</div>
<div
class="row totalLastRow"
style="
background-color: #f5f6fa;
border: 1px solid #c4cdd5;
border-left: none;
border-right: none;
color: #333f52;
font-size: 14px;
font-family: poppins, sans-serif;
font-weight: 500;
padding: 10px 0;
justify-content: space-between;
flex-wrap: nowrap;
padding: 22px 15px 18px 15px;
"
>
<div
scope="col"
class="package"
style="width: 195px; padding-right: 25px"
>
TOTAL
</div>
<div
scope="col"
class="quantity"
style="width: 135px; padding-right: 25px"
>
{{ totalOfQuantity ? totalOfQuantity : "0" }}
</div>
<div
scope="col"
class="length"
style="width: 145px; padding-right: 25px"
></div>
<div
scope="col"
class="width"
style="width: 140px; padding-right: 25px"
></div>
<div
scope="col"
class="height"
style="width: 165px; padding-right: 45px"
></div>
<div
scope="col"
class="weight"
style="width: 160px; padding-right: 25px; text-align: center"
>
{{ totalOfWeight ? totalOfWeight : ("0" | number : "1.2-2") }}
</div>
<div
scope="col"
class="shipment-value description"
style="width: 236px; padding-right: 35px"
></div>
<div
 scope="col"
class="shipment-value"
style="width: 236px; padding-right: 35px; text-align: center"
>
$
{{
totalofShipmentValue
? (totalofShipmentValue | number : "1.2-2")
: "0.00"
}}
</div>
<div
scope="col"
class="class"
style="width: 170px; padding-right: 35px"
></div>
<div
scope="col"
class="nmfc"
style="width: 160px; padding-right: 25px"
></div>
<div
scope="col"
class="stackable"
style="width: 75px; margin-right: 30px; justify-content: center"
></div>
<div
scope="col"
class="hazmat"
style="width: 60px; margin-right: 30px; justify-content: center"
></div>
<div
scope="col"
class="action"
style="width: 50px; justify-content: flex-end"
></div>
</div>
</div>
</div>
<div class="paymentDetailsOuterBox">
<div class="billingtableContainer row" style="overflow-x: scroll">
<!-- Mainheader start -->
<div
class="row tableHeadingSection"
style="width: 100%; min-width: 450px"
>
<div class="col-6 p-0">
<span class="p-0">Payment Details</span>
</div>
<div class="col-5 p-0">
<span class="m-0" (click)="addLinePaymentDetailsByClick()"
>Add Line Item</span
>
</div>
</div>
<!-- Mainheader end -->
<div style="width: 100%">
<!-- table header start -->
<div
 class="tableheader"
style="
border-bottom: 1px solid #c4cdd5 !important;
border-top: 1px solid #c4cdd5 !important;
"
>
<div
class="billingheading billingheading1"
style="width: 285px; padding-right: 25px"
>
Charge Item<span style="color: #f85359">*</span>
</div>
<div
class="billingheading billingheading2"
style="width: 255px; padding-right: 25px"
>
Pro Bill
</div>
<div
class="billingheading billingheading3"
style="width: 265px; padding-right: 35px"
>
Charge Description
</div>
<div
class="billingheading billingheading4"
style="width: 127px; padding-right: 32px"
>
Quantity<span style="color: #f85359">*</span>
</div>
<div
class="billingheading billingheading5"
style="width: 137px; padding-right: 32px"
>
Price<span style="color: #f85359">*</span>
</div>
<div
class="billingheading billingheading6"
style="width: 35px; margin-right: 20px; text-align: center"
>
AC
</div>
<div
class="billingheading billingheading7"
style="width: 20px; margin-right: 21px; text-align: center"
>
PD
</div>
<div
class="billingheading billingheading8"
style="width: 70px; margin-right: 25px"
>
AFS
</div>
<div
class="billingheading billingheading9"
style="width: 200px; padding-right: 65px"
>
Tax Group<span style="color: #f85359">*</span>
 </div>
<div
class="billingheading billingheading10"
style="width: 178px; padding-right: 38px"
>
Total Charge
</div>
<div
class="billingheading billingheading11"
style="width: 50px; margin-right: 5px; text-align: end"
>
Action
</div>
</div>
<!-- table header end -->

<!-- table body start -->

<div
class="billingtablebody"
formArrayName="paymentDetails"
style="border-bottom: 1px solid #c4cdd5 !important"
*ngFor="
let line of orderDetailForm.get('paymentDetails')?.controls;
let i = index
"
>
<div
[formArrayName]="i"
style="
display: flex;
justify-content: space-between;
width: 100%;
"
>
<div
class="billingbody billingbody1"
style="width: 285px; padding-right: 25px"
>
<div>
<select
class="selectionBox"
name="chargeList_{{ i }}"
id="chargeList_{{ i }}"
formControlName="chargeItem"
(change)="setChargeDesctiption($event.target.value, i)"
*ngIf="!editOrder && !backToStep1"
>
<option value="">Select Charge Item</option>
<option
value="{{ item.chargeId }}"
*ngFor="let item of chargeList"
>
{{ item.chargeName }}
</option>
</select>
<select
class="selectionBox"
name="chargeList_1{{ i }}"
id="chargeList_1{{ i }}"
 formControlName="chargeItem"
(change)="setChargeDesctiption($event.target.value, i)"
*ngIf="editOrder || backToStep1"
>
<option value="">Charge Item</option>
<option
value="{{ item.chargeId }}"
*ngFor="let item of chargeList"
>
{{ item.chargeName }}
</option>
</select>
<!-- <select class="selectionBox autoChargeItem"
name="chargeList_2{{i}}" id="chargeList_2{{i}}"
*ngIf="(editOrder || backToStep1) &&
line.get('chargeItem').value==''">
<option
value="">{{line.get('autoChargeItem').value}}</option>
</select> -->
</div>
</div>
<div
class="billingbody billingbody1"
style="width: 285px; padding-right: 25px"
>
<div>
<select
class="selectionBox"
required
name="probill"
id="probill"
formControlName="probill"
(change)="onproBillChange()"
>
<option value="">Select Probill</option>
<option
value="{{ item.id }}"
*ngFor="let item of generatedProbillNo"
>
{{ item.probillNumber }}
</option>
</select>

<div
*ngIf="
line.get('probill').invalid &&
(line.get('probill').dirty ||
line.get('probill').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('probill').errors.required"
>
Probill is required.
</div>
 </div>
</div>
</div>
<div
class="billingbody billingbody3"
style="width: 265px; padding-right: 35px"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div>
<input
type="text"
formControlName="chargeDescription"
[value]="
line.controls.chargeItem.value != ''
? line.controls.chargeDescription.value
: ''
"
/>
<div
*ngIf="
line.get('chargeDescription').invalid &&
(line.get('chargeDescription').dirty ||
line.get('chargeDescription').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('chargeDescription').errors.required"
>
Charge Description is required.
</div>
</div>
</div>
</div>
<div
class="billingbody billingbody4"
style="width: 127px; padding-right: 32px"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div>
 <input
type="number"
placeholder="0"
formControlName="quantity"
(input)="
priceAndQuantityInput(
i,
'quantity',
$event.target.value
)
"
/>
<div>
<span (click)="increaseByOneInPayment(i)">+</span>
<span (click)="decreaseByOneInPayment(i)">-</span>
</div>
</div>
<div
*ngIf="
line.get('quantity').invalid &&
(line.get('quantity').dirty ||
line.get('quantity').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.required"
>
Quantity is required.
</div>
<div
style="color: red !important"
*ngIf="line.get('quantity').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('quantity').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="billingbody billingbody5"
style="width: 137px; padding-right: 32px"
[ngStyle]="{
 filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px;
"
>
<span style="margin-right: 3px">$</span>

<input
type="number"
placeholder="0.00"
formControlName="price"
(input)="
priceAndQuantityInput(i, 'price', $event.target.value)
"
style="border: none !important; padding: 0 !important"
/>
</div>
<div
*ngIf="
line.get('price').invalid &&
(line.get('price').dirty || line.get('price').touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('price').errors.required"
>
Price is required.
</div>
<div
style="color: red !important"
*ngIf="line.get('price').errors.pattern"
>
Special charactres not allowed.
</div>
<div
class="error"
style="color: red !important"
*ngIf="line.get('price').errors.min"
>
Minimum 1 digit.
</div>
<div
class="error"
style="color: red !important"
 *ngIf="line.get('price').errors.max"
>
Maximum 10 digit.
</div>
</div>
</div>
<div
class="billingbody billingbody6"
style="
width: 35px;
margin-right: 20px;
justify-content: center;
display: flex;
"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div>
<input type="checkbox" name="" id="" formControlName="ac" />
</div>
</div>
<div
class="billingbody billingbody7"
style="
width: 20px;
margin-right: 21px;
justify-content: center;
display: flex;
"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div>
<input type="checkbox" name="" id="" formControlName="pd" />
</div>
</div>
<div
class="billingbody billingbody8"
style="
width: 70px;
margin-right: 25px;
justify-content: space-between;
display: flex;
"
[ngStyle]="{
 filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div style="width: 25px !important">
<input
type="checkbox"
(change)="
openFuelModelToAddFuelSurcharge(i, addFuelCharge)
"
name=""
id=""
formControlName="afs"
/>
</div>
<span
*ngIf="
line.controls.fuelType.value &&
line.controls.fuelCharge.value
"
style="color: #ff9a00; cursor: pointer"
(click)="setValueInModelToEditFuelCharge(i, addFuelCharge)"
>Edit</span
>
</div>
<div
class="billingbody billingbody9"
style="width: 200px; padding-right: 65px"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div style="width: -webkit-fill-available">
<select
name=""
id=""
formControlName="taxGroup"
(ngModelChange)="calculateTotalChargeInPayment()"
style="font-weight: 400"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity:
line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
 }"
>
<option
value="{{ taxType.taxName }}"
*ngFor="let taxType of allTaxList"
>
{{ taxType.taxName }}
</option>
</select>
<div
*ngIf="
line.get('taxGroup').invalid &&
(line.get('taxGroup').dirty ||
line.get('taxGroup').touched)
"
>
<div
class="error"
style="color: red !important"
*ngIf="line.get('taxGroup').errors.required"
>
Tax group is required.
</div>
</div>
</div>
</div>
<div
class="billingbody billingbody10"
style="width: 178px; padding-right: 38px"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<div>
<input
type="text"
placeholder="0.00"
formControlName="totalCharge"
pattern="^\d*(\.\d{0,2})?$"
[value]="'$' + line.get('totalCharge').value"
/>
</div>
</div>
<div
class="billingbody billingbody11"
style="
width: 50px;
margin-right: 5px;
justify-content: flex-end;
"
[ngStyle]="{
filter:
line.controls.chargeItem.value == ''
 ? 'grayscale(100%)'
: 'grayscale(0%)',
opacity: line.controls.chargeItem.value == '' ? '0.5' : '1',
'pointer-events':
line.controls.chargeItem.value == '' ? 'none' : ''
}"
>
<!-- <img *ngIf="i>0" (click)="removeItemFromlist(i)"
src="/assets/img/circle-minus-outline_minor.svg" alt=""> -->
<img
*ngIf="
orderDetailForm.get('paymentDetails').value.length == 1
"
src="/assets/img/circle-minus-outline_minor.svg"
class="m-0 p-0"
style="cursor: pointer; pointer-events: none"
alt=""
/>
<img
*ngIf="
orderDetailForm.get('paymentDetails').value.length != 1
"
src="/assets/img/circleminus.svg"
class="m-0 p-0"
style="cursor: pointer"
alt=""
(click)="removeLinePaymentDetails(i)"
/>
</div>
</div>
</div>
<div
class="billingtablebody"
*ngFor="let item of outBoundInBoundChargeArray; let i = index"
style="
border-bottom: 1px solid #c4cdd5 !important;
pointer-events: none;
opacity: 0.6;
"
>
<div
style="
display: flex;
justify-content: space-between;
width: 100%;
"
>
<div
class="billingbody billingbody2"
style="width: 272px; padding-right: 24px"
>
<div>
<input type="text" [value]="item.chargeName" />
</div>
</div>
<div
class="billingbody billingbody2"
style="width: 301px; margin-left: 8px; padding-right: 30px"
>
 <div><input type="text" [value]="item.probill" /></div>
</div>
<div
class="billingbody billingbody2"
style="width: 265px; padding-right: 35px"
>
<div>
<input type="text" [value]="item.chargeName" />
</div>
</div>
<div
class="billingbody billingbody4"
style="width: 127px; padding-right: 32px"
>
<div>
<input
type="number"
[value]="item.quantity"
placeholder="0"
/>
<div>
<span>+</span>
<span>-</span>
</div>
</div>
</div>
<div
class="billingbody billingbody5"
style="width: 137px; padding-right: 32px"
>
<div
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px;
"
>
<span>$</span>
<input
type="number"
placeholder="0.00"
[value]="item.price"
style="border: none !important; padding: 0 !important"
/>
</div>
</div>
<div
class="billingbody billingbody6"
style="
width: 35px;
margin-right: 20px;
justify-content: center;
display: flex;
"
>
<div>
<input type="checkbox" name="" id="" />
</div>
</div>
<div
class="billingbody billingbody7"
style="
width: 20px;
margin-right: 21px;
justify-content: center;
display: flex;
"
>
<div>
<input type="checkbox" name="" id="" />
</div>
</div>
<div
class="billingbody billingbody8"
style="
width: 70px;
margin-right: 25px;
justify-content: space-between;
display: flex;
"
>
<div style="width: 25px !important">
<input type="checkbox" name="" id="" />
</div>
</div>
<div
class="billingbody billingbody9"
style="width: 200px; padding-right: 65px"
>
<div style="width: -webkit-fill-available">
<select name="" id="">
<option value="">HST 13</option>
</select>
</div>
</div>
<div
class="billingbody billingbody10"
style="width: 178px; padding-right: 38px"
>
<div
style="
display: flex;
align-items: center;
border: 1px solid #ced0da;
padding: 5px 9px;
"
>
<span>$</span>
<input
type="text"
placeholder="0.00"
[value]="item.price * item.quantity"
pattern="^\d*(\.\d{0,2})?$"
style="border: none !important; padding: 0 !important"
/>
</div>
</div>
<div
 class="billingbody billingbody11"
style="
width: 50px;
margin-right: 5px;
justify-content: flex-end;
"
>
<img
src="/assets/img/circleminus.svg"
class="m-0 p-0"
style="cursor: pointer"
alt=""
/>
</div>
</div>
</div>
<!-- table body end -->
<!-- table footer start -->
<div
class="billingtablefooter d-flex"
style="width: 100%; padding: 19px 15px; min-width: 1545px"
>
<div
class="billingheading billingheading1"
style="width: 285px; padding-right: 25px"
></div>
<div
class="billingheading billingheading2"
style="width: 255px; padding-right: 25px"
></div>
<div
class="billingheading billingheading3"
style="width: 265px; padding-right: 35px"
></div>
<div
class="billingheading billingheading4"
style="width: 127px; padding-right: 32px"
></div>
<div
class="billingheading billingheading5"
style="width: 137px; padding-right: 32px"
></div>
<div
class="billingheading billingheading6"
style="width: 35px; margin-right: 20px; text-align: center"
></div>
<div
class="billingheading billingheading7"
style="width: 20px; margin-right: 21px; text-align: center"
></div>
<div
class="billingheading billingheading8"
style="width: 30px; margin-right: 25px; text-align: center"
></div>
<div
class="billingheading billingheading9"
style="width: 200px; padding-right: 65px"
></div>
<div
 class="billingheading billingheading10 d-flex justify-content-
between"
style="
width: 178px;
padding-right: 38px;
color: #333f52;
font-size: 15px;
font-weight: 500;
"
>
<span>TOTAL</span>&nbsp;<span
>$ {{ totalChargePaymentDetails | number : "1.2-2" }}</span
>
</div>
<div
class="billingheading billingheading11"
style="width: 50px; margin-right: 5px; text-align: end"
></div>
</div>
<!-- table footer end -->
</div>
</div>

<div class="billingBottomContainer" style="padding: 35px 28px">

<!-- <div class="billingBottomContainerHeading"><span>Additional
Details</span></div> -->
<div class="con">
<div class="col-12 col-lg-5 bottommidcon">
<div class="col-12 p-0">
<div class="row align-items-end">
<div class="rateininvoicein"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 p-0 bottomrightcon">
<div class="row">
<div
class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading1"
>
Base Charges
</div>
<div
class="col-12 p-0"
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px !important;
pointer-events: none;
"
>
<span style="margin-right: 3px">$</span>
<input
type="text"
placeholder="0.00"
formControlName="baseCharges"
style="border: none !important; padding: 0 !important"
/>
</div>
 </div>
<div class="row">
<div
class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading3"
>
FSC Amount
</div>
<div
class="col-12 p-0"
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px !important;
pointer-events: none;
"
>
<span style="margin-right: 3px">$</span>
<input
type="text"
placeholder="0.00"
formControlName="fscAmount"
style="border: none !important; padding: 0 !important"
/>
</div>
</div>
<!-- <div class="row">
<div class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading3">GST Amount
</div>
<div class="col-12 p-0"
style="display: flex; border: 1px solid
#CED0DA; padding: 5px 9px !important; pointer-events: none;">
<span style="margin-right: 3px;">$</span>
<input type="text" placeholder="0.00"
[value]="allTaxListMap['GST']?.tax"
style="border: none !important; padding:
0 !important;" [ngClass]="isInitial ? 'custom-txt':''">
</div>
</div>
<div class="row">
<div class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading3">HST Amount
</div>
<div class="col-12 p-0"
style="display: flex; border: 1px solid
#CED0DA; padding: 5px 9px !important; pointer-events: none;">
<span style="margin-right: 3px;">$</span>
<input type="text" placeholder="0.00"
[value]="allTaxListMap['HST']?.tax" [ngClass]="isInitial ? 'custom-txt':''"
style="border: none !important; padding:
0 !important;">
</div>
</div>
<div class="row">
<div class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading3">HST 15 Amount
</div>
<div class="col-12 p-0"
 style="display: flex; border: 1px solid
#CED0DA; padding: 5px 9px !important; pointer-events: none;">
<span style="margin-right: 3px;">$</span>
<input type="text" placeholder="0.00"
[value]="allTaxListMap['HST 15']?.tax" [ngClass]="isInitial ? 'custom-txt':''"
style="border: none !important; padding:
0 !important;">
</div>
</div> -->
<div class="row">
<div
class="col-12 p-0 bottonrightcontainerheading
bottonrightcontainerheading4"
(click)="showBillingPopup()"
style="color: #2877c6 !important; cursor: pointer"
>
Total Tax Amount
</div>
<div
class="col-12 p-0"
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px !important;
pointer-events: none;
"
>
<span style="margin-right: 3px">$</span>
<input
type="text"
placeholder="0.00"
formControlName="taxAmount"
style="border: none !important; padding: 0 !important"
/>
</div>
</div>
<div class="row">
<div
class="p-0 bottonrightcontainerheading
bottonrightcontainerheading5"
style="width: 90px"
>
Currency
</div>
<div
class="bottonrightcontainerheading bottonrightcontainerheading5"
style="width: calc(100% - 90px)"
>
Total Charge
</div>
<div class="bottomCurrencyOption p-0" style="width: 90px">
<ng-select
class="flagOption"
[items]="currencies"
formControlName="additionalCurrency"
id="additionalCurrency"
bindLabel="countryCurrency"
bindValue="countryCurrency"
[searchable]="false"
 [clearable]="false"
>
<ng-template ng-label-tmp let-item="item">
<img
height="15"
width="15"
src="assets/img/common/{{ item.countryCode }}.svg"
/>
<b
style="
font-weight: 400;
margin-left: 6px;
font-size: 14px;
color: #7d7d7e;
"
>{{ item.countryCurrency }}</b
>
</ng-template>
<ng-template
ng-option-tmp
let-item="item"
let-index="index"
>
<img
height="15"
width="15"
src="assets/img/common/{{ item.countryCode }}.svg"
/>
<b
style="
font-weight: 400;
margin-left: 10px;
font-size: 14px;
"
>{{ item.countryCurrency }}</b
>
</ng-template>
</ng-select>
</div>
<div
class="p-0"
style="
display: flex;
border: 1px solid #ced0da;
padding: 5px 9px !important;
pointer-events: none;
width: calc(100% - 90px);
"
>
<span style="margin-right: 3px">$</span>
<input
type="text"
placeholder="0.00"
formControlName="totalCharges"
style="border: none !important; padding: 0 !important"
/>
</div>
</div>
</div>
 </div>
</div>
</div>
</form>
</div>
<div
class="container-fluid p-0 d-flex step1Footer"
style="position: fixed; bottom: 0"
[ngStyle]="{
width: sharedData.toggle ? 'calc(100% - 103px)' : 'calc(100% - 223px)'
}"
>
<div class="shipcarteInfoBox">
<h4 class="m-0 shipcarteInfoHeading">Shipment Information</h4>
<div class="d-flex shipcarteInfoData">
<div>
<span>Mode:</span>{{ selectedShmtMode ? selectedShmtMode : "--" }}
</div>
<div>
<span>Piece Count:</span
>{{ totalOfQuantity ? totalOfQuantity : "--" }}
</div>
<div>
<span>Linear Feet:</span>L{{ totalofLength ? totalofLength : "--" }},
W{{ totalofWidth ? totalofWidth : "--" }}, H{{
totalofHeight ? totalofHeight : "--"
}}
</div>
<div>
<span>Total Weight:</span>{{ totalOfWeight ? totalOfWeight : "--" }}
</div>
<div><span>Class:</span>{{ totalClass ? totalClass : "--" }}</div>
<div>
<span>Shipment Value:</span>$
{{ totalofShipmentValue ? totalofShipmentValue : "--" }}
</div>
</div>
</div>
<div class="buttonBox">
<button class="cancelBtn" (click)="confirmModalOpen()">Cancel</button>
<button class="assignOrderBtn" (click)="getDisabled()">
{{ assignSaveBtn }}
<img
src="/assets/img/common/right_arrow.svg"
alt=""
style="padding-left: 10px"
/>
</button>
</div>
</div>
</div>
<ng-template #addFuelCharge let-c="close" let-d="dismiss">
<form [formGroup]="fuelChargeFrom">
<div style="padding: 18px 23px">
<span style="font-size: 20px; color: #354052; font-weight: 500"
>Apply Fuel Surcharge</span
>
</div>
<div
 style="
padding: 9px 13px;
display: flex;
justify-content: center;
margin-top: 10px;
"
>
<div style="display: flex; justify-content: space-between; width: 400px">
<div
style="display: flex; align-items: center; justify-content: center"
>
<span style="font-size: 18px; color: #354052; font-weight: 500"
>Applied As</span
>
</div>
<div>
<select
formControlName="fuelType"
id="fuelType"
(change)="setApplyFuelSurchargeCode($event.target.value)"
style="
border: 1px solid #ced0da;
font-size: 16px;
color: #354052;
font-weight: 500;
padding: 5px 5px;
background-image: linear-gradient(0deg, #f2f4f7 0%, #ffffff 100%);
outline: none;
width: 198px;
"
name=""
id=""
>
<option disabled selected hidden>Select value</option>
<option value="percentage">% of Revenue</option>
<option value="fixed">Fixed Amount</option>
</select>
<div
*ngIf="
fuelChargeFrom.controls['fuelType'].invalid &&
(fuelChargeFrom.controls['fuelType'].dirty ||
fuelChargeFrom.controls['fuelType'].touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="fuelChargeFrom.controls['fuelType'].errors.required"
>
This field is required.
</div>
</div>
</div>
</div>
</div>
<div style="padding: 9px 13px; display: flex; justify-content: center">
<div style="display: flex; justify-content: space-between; width: 400px">
 <div
style="display: flex; align-items: center; justify-content: center"
>
<span style="font-size: 18px; color: #354052; font-weight: 500"
>Surcharge Rate</span
>
</div>
<div style="position: relative">
<input
formControlName="fuelAmount"
id="fuelAmount"
style="
width: 198px;
border: 1px solid #ced0da;
font-size: 16px;
color: #354052;
font-weight: 500;
padding: 5px 5px;

outline: none;
"
type="text"
/>
<div
*ngIf="
fuelChargeFrom.controls['fuelAmount'].invalid &&
(fuelChargeFrom.controls['fuelAmount'].dirty ||
fuelChargeFrom.controls['fuelAmount'].touched)
"
style="color: red"
class="error"
>
<div
class="error"
style="color: red !important"
*ngIf="fuelChargeFrom.controls['fuelAmount'].errors.required"
>
This field is required.
</div>
<div
class="error"
style="color: red !important"
*ngIf="fuelChargeFrom.controls['fuelAmount'].errors.pattern"
>
Character and Special not allowed
</div>
</div>
<span
*ngIf="isPercentage"
style="position: absolute; right: 7px; top: 8px; font-size: 16px"
>%</span
>
</div>
</div>
</div>

<div style="margin-top: 24.41px; margin-bottom: 25.9px">

<div
class="row justify-content-end"
 style="padding-left: 22.66px !important"
>
<button
type="button"
class="btn btn-cancel customCancelButton"
(click)="d('Cancel click')"
style="font-size: 14px; color: #354052; margin-right: 19px"
>
Cancel
</button>
<button
type="button"
style="
padding: 0px 7px;
font-weight: 600;
width: 90px;
background-color: #ff9a00;
color: white;
border-radius: 0% !important;
margin-right: 26.66px;
"
class="btn btn-color"
(click)="c('Save click')"
>
Apply
</button>
</div>
</div>
</form>
</ng-template>
<!-- ##################################### Loading page
############################################## -->
<app-spinner></app-spinner>

<ng-template #confirmDeleteShipperConsignee let-c="close" let-d="dismiss">

<div class="confirmDeletePackageMainDiv">
<div class="deleteTextImgWrapper" style="text-align: center">
<img src="assets/img/Warning.svg" alt="" />
<p>Are you sure you want to remove it?</p>
</div>
<div
class="footerWrapper"
style="display: flex; justify-content: flex-end; align-items: center"
>
<button class="btn cancelBtn" (click)="d('Cancel')">Cancel</button>
<button class="btn removeBtn" (click)="c('Remove')">Yes</button>
</div>
</div>
</ng-template>
<ng-template #contentWarn let-modal>
<div>
<div class="row" style="margin-top: 30px">
<div class="col-12 text-center">
<img
style="padding-top: 10px; height: 120px"
src="assets/img/Warning.svg"
alt=""
/>
</div>
 </div>
<div class="row justify-content-center">
<div class="col-12 text-center">
<p
class="mb-0"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
text-align: left;
"
>
{{ popupMsg }}
</p>
</div>
</div>
<div
class="row mt-5 ml-0 mr-0 footerDivModal"
style="margin-top: 3rem !important; margin-bottom: 1rem !important"
>
<div class="col12 width100responsive">
<div class="footerdirectionModal">
<!-- <button
style="border: none !important; background-color: white !
important;font-weight: 500;font-size: 14px; font-family: poppins;color: #303447; "
(click)="modal.dismiss('Cancel
click');shipperFromTimeWithin2Hr=true">Cancel</button> -->
<button class="popupButtonCol" (click)="modal.close('Save click')">
Ok
</button>
</div>
</div>
</div>
</div>
</ng-template>

<ng-template #taxGrouppopup let-modal>

<div>
<div
class="row"
style="margin-top: 30px !important; margin-bottom: 20px !important"
>
<div class="col-12 text-center">
<!-- <img style="padding-top: 10px;height: 120px;"
src="assets/img/Warning.svg" alt=""> -->
<h5
style="
margin-top: 5px !important;
font-size: 18px !important;
font-weight: 600 !important;
font-family: poppins, sans-serif !important;
"
>
Tax Breakup
</h5>
</div>
<div
 _ngcontent-lah-c9=""
class="col-12 p-0"
style="border-top: 1px solid #c4cdd5; margin-top: 17px"
></div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center">
<p
class="mb-2"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
text-align: left;
"
>
GST 5 Amount :
<span style="float: right">{{
"$" + allTaxListMap["GST 5"]?.tax
}}</span>
</p>
</div>
<div class="col-12 text-center">
<p
class="mb-2"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
text-align: left;
"
>
HST 13 Amount :<span style="float: right">
{{ "$" + allTaxListMap["HST 13"]?.tax }}</span
>
</p>
</div>
<div class="col-12 text-center">
<p
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
text-align: left;
"
>
HST 15 Amount :
<span style="float: right">{{
"$" + allTaxListMap["HST 15"]?.tax
}}</span>
</p>
</div>
<div
 _ngcontent-lah-c9=""
class="col-12 p-0"
style="border-top: 1px solid #c4cdd5; margin-top: 10px"
></div>
<div class="col-12 text-center">
<p
class="mb-1 pt-2"
style="
font-size: 16px;
font-weight: 500;
font-family: poppins;
color: #354052;
padding: 0 40px 0 40px;
text-align: left;
"
>
Total Tax Amount :<span style="float: right">
{{
"$" +
(orderDetailForm.get("taxAmount").value
? orderDetailForm.get("taxAmount").value
: ("0.00" | number : "1.2-2"))
}}</span
>
</p>
</div>
</div>
<div
class="row mt-5 ml-0 mr-0 footerDivModal"
style="margin-top: 2rem !important; margin-bottom: 1rem !important"
>
<div class="col12 width100responsive">
<div class="footerdirectionModal">
<button class="popupButtonCol" (click)="modal.close('Save click')">
Ok
</button>
</div>
</div>
</div>
</div>
</ng-template>
.................
new-order.ts:
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Position, ThrowStmt } from "@angular/compiler";
import { typeWithParameters } from "@angular/compiler/src/render3/util";
import {
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
OnInit,
ViewChild,
} from "@angular/core";
import {
AbstractControlDirective,
FormArray,
FormBuilder,
FormGroup,
 Validators,
} from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import {
NgbModal,
NgbDateStruct,
NgbDatepickerConfig,
NgbDateParserFormatter,
NgbTimeStruct,
} from "@ng-bootstrap/ng-bootstrap";
import { ToastrService } from "ngx-toastr";
import { element } from "protractor";
import { fromEvent, of } from "rxjs";
import {
ScCommonService,
UnitedStatesDateParserFormatter,
} from "src/app/services/common/sc-common.service";
import { ScHttpService } from "src/app/services/http/sc-http.service";
import { ServerURLS } from "src/environments/environment";
import { ChangePasswordComponent } from "../../profile/change-password/change-
password.component";
import { ListDataServiceService } from "src/app/services/list-data-
service.service";
import {
filter,
debounceTime,
distinctUntilChanged,
tap,
} from "rxjs/operators";
import { LoadingService } from "src/app/services/loader.service";
import { Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({
selector: "app-new-order",
templateUrl: "./new-order.component.html",
styleUrls: ["./new-order.component.scss"],
providers: [
{
provide: NgbDateParserFormatter,
useClass: UnitedStatesDateParserFormatter,
},
],
})
export class NewOrderComponent implements OnInit, OnChanges {
selectedCharge;
any;
@ViewChild("loadContent", undefined) loadContent;
@ViewChild("searchElementInput", { static: false }) searchElement: ElementRef;
@ViewChild("custoDropDown", { static: false }) custoDropDown: ElementRef;
@ViewChild("contentWarn", undefined) confirmModal;
@ViewChild("taxGrouppopup", undefined) taxGrouppopup;

currentValue: string = "";

previousValue: string = "";

shpmntModePkgTypeData: any = [];

shmtModeSelectedArr = [];
isShmtModeSelected: boolean = false;
pkgTypes = [];
pkgTypeSelectedArr = [];
isPkgTypeSelected: boolean = false;
selectedShmtMode: string = "";
selectedShmtModeId: string = "";
shmtModeCourier: boolean = false;
displayData = true;
selectedPkgType: string = "";
selectedPkgTypeId: string = "";
selectedPkgStyleCode: string = "";
fullTruckLoadSelected: boolean = false;
shipperNumber: number = 0;
consigneeNumber: number = 0;
isAddressBookShipper: any = [];
isAddressBookConsignee: any = [];
accesserialLabelStart: string = "Select Accessorial";
accesserialLabelEnd: string = "Select Accessorial";
orderDetailForm: FormGroup;
fuelChargeFrom: FormGroup;
shippers: FormArray;
consignees: FormArray;
shearchaddress: any = [];
detailsForm: FormGroup;
latlng: any = [];
origin: any;
destination: any;
mapService: any;
found: any;
found2: any;
addressData: any[];
ConsigneeAddressData: any[];
defaultaddressbookdata: any[];
displayCourier = false;
cadCurrency = [{ countryCurrency: "CAD", countryCode: "CA" }];
usdCurrency = [{ countryCurrency: "USD", countryCode: "US" }];
currencies = [
{ countryCurrency: "CAD", countryCode: "CA" },
{ countryCurrency: "USD", countryCode: "US" },
];
freightClassObj: any;
freightDisplayDataObj: any;
defaultHazmat: boolean = false;
freightClassSelectedId: any;
locationType: any;
accessorialData: any[] = [];
shipAgainQuoteID: any;
showDetailedAddressError = false;
showShipperWarning = false;
saveQuoteDataObj: any;
countryShipperString = "";
acceserialStart: any[] = [];
showDetailedEndAddressError = false;
showConsigneeWarning = false;
shearchaddress2: any = [];
countryConsigneeString = "";
acceserialEnd: any[] = [];
showHideHazmatOptionsIndexArr = [];
address_components;
postalValid = false;
geometry;
currentShipperCount: number = 0;
currentConsigneeCount: number = 0;
setcurrency = "CAD";
zoom: number = 8;
detailsOfCompany: any = {};
showShipperWarningAdd = false;
showConsigneeWarningAdd = false;
measurementType = "imperial";
fscTotal: number = 0;
selectedCustomerId: any;
displayOrder: number = 1;
proBill: any = "";
totalClass: any;
outBoundInBoundChargeArray: any = [];

shipperPickupDate: NgbDateStruct;
consigneePickupDate: NgbDateStruct;
minDate: any;
dateVal = true;
todaysDate: any;
classToSet: any[] = [];
densityCounter = 0;
shipingHours: any;
totalHstGstTax = 0;
carrierDetailList: any = [];
customerDetailsByid: any;
billingLocation: any;
BussinessAccessrialpackageTypeDetail: any;
businessTypeArray: any = [];
accessorialsData: any = [];
accessorialsDataCon: any = [];
accessorailList: any = [];
accessorailListCon: any = [];
Billto: any = "";
primaryContact: string = "";
primaryPhone: string = "";
primaryEmail: string = "";
serviceType: any;
allserviceTypes: any = [];
customerPackageDate: any = [];
dataFromGoogleApiLocation: any;
isManualLookUp: any = [true];
isManualLookUpInCon: any = [true];
isHazmatChecked: any = [false];
totalOfQuantity: any = 1;
totalOfWeight: any;
totalofWidth: any;
totalofLength: any;
totalofHeight: any;
totalofShipmentValue: any;
totalChargePaymentDetails: any = 0.0;
chargeList: any = [];
popupMsg = "";
allTaxList = [];
allTaxListMap = {};
packageListInShipment: any = [
{
shpmtPkgName: "Pallets",
shpmtPkgId: "b8e221f4-f312-11e9-8462-163046d26cd4",
 },
{
shpmtPkgName: "Boxed",
shpmtPkgId: "b8e223fe-f312-11e9-8462-163046d26cd4",
},
{
shpmtPkgName: "Crated",
shpmtPkgId: "b8e22463-f312-11e9-8462-163046d26cd4",
},
{
shpmtPkgName: "Drums or Barrels",
shpmtPkgId: "b8e224c7-f312-11e9-8462-163046d26cd4",
},
];
shown = false;
selectedValue: any = "Search Customer";
shipmentCode: string;
generatedProbillNo: any = [];
pickUpList: Object;
pickUpListConsignee: Object;
probillList: any = [
{ id: 1, probillName: "Identical Pickup" },
{ id: 2, probillName: "Identical Delivery" },
{ id: 3, probillName: "Switch Pickup & Delivery" },
{ id: 4, probillName: "Copy Pickup & Delivery" },
];
pickupDelMode: any;
parentQuoteOrderId: string;

show() {
this.shown = this.shown ? false : true;
setTimeout(() => {
// this will make the execution after the above boolean has changed
document.getElementById("searchInpit").focus();
const currentValue = this.orderDetailForm.get("searchCustomer").value;
this.orderDetailForm.get("searchCustomer").patchValue("");
this.orderDetailForm.get("searchCustomer").patchValue(currentValue);
this.cdr.detectChanges();
}, 200);
}
selectedShmtIndexForStep1: any;
selectedShmtDataForStep1: any;
selectedPkgIndexForStep1: any;
selectedPkgDataForStep1: any;
step1DataLs: any;
selectedCustomerName: any;
availableCreditLimitInCAD: any;
availableCreditLimitInUSD: any;
isCreditDisabled: boolean;
editOrder: boolean = false;
objToPopulateData: any;
consigneeToggleBoolean: boolean;
shipperToggleBoolean: boolean;
backToStep1: boolean = false;
screenTitle: string = "New Order Entry";
assignSaveBtn: string = "Assign Order";
sharedData: any;
shipAgain: boolean = false;
executing: boolean = false;
defaultTaxGroup = {
taxName: "NO TAX",
taxPercent: 0,
};
constructor(
private router: Router,
private scHttpService: ScHttpService,
private modalService: NgbModal,
private toastr: ToastrService,
private formBuilder: FormBuilder,
private modelService: NgbModal,
private activatedRoute: ActivatedRoute,
private httpClient: HttpClient,
private config: NgbDatepickerConfig,
public commonService: ScCommonService,
private listDataService: ListDataServiceService,
private cdr: ChangeDetectorRef,
private _loaderService: LoadingService
) {
this.commonService.currentData.subscribe((data: any) => {
this.sharedData = data;
});
this.activatedRoute.queryParams.subscribe((params) => {
this.parentQuoteOrderId =
this.activatedRoute.snapshot.paramMap.get("quoteId");
if (params.execute) {
this.scHttpService.removeLocalData();
}
// Retrieve the query parameters
if (params.shipAgain) {
this.shipAgain = true;
}
if (params.execute) {
this.executing = true;
}
});
this.getChargeList();
}
isInitial = true;
taxUpdate = false;
ngOnInit() {
console.log(this.parentQuoteOrderId);

let probilllocal: any = localStorage.getItem("setpOneData");

let probilllocalSave = JSON.parse(probilllocal);

if (probilllocalSave) {
this.generatedProbillNo = probilllocalSave.proQuoteRefList.map(
(item) => ({
id: item.probillNo,
probillNumber: item.probillNo,
})
);

const parentQuote = probilllocalSave.proQuoteRefList.find(

(item) => item.parentQuote === true
);
const parentQuoteId = parentQuote.quoteId;
let saveddata = localStorage.getItem("probillData");
 this.formDataBaisedonProbill = JSON.parse(saveddata);
console.log(this.formDataBaisedonProbill, "ddd");
const probillData = this.getProbillData(this.generatedProbillNo[1].id);
console.log(
probillData[0].orderDetailForm.currentProbill,
"selectedProbillData"
);
this.currentSelectedProbill = this.generatedProbillNo.filter(
(item) => item.id == probillData[1].orderDetailForm.currentProbill
);
// console.log(this.currentSelectedProbill, "selectedProbillData12")
this.orderDetailForm
.get("currentProbill")
.patchValue(probillData[0].orderDetailForm.currentProbill);

this.prBillDrpDwnActive = false;

if (probillData) {
this.patchFormData(probillData[0]);
}
} else {
let url =
ServerURLS.getManualOrderProbill.action +
"?parentQuoteId=" +
this.parentQuoteOrderId;
this.scHttpService.getHttpService(url, "").then((data: any) => {
this.generatedProbillNo = data.proBillDTOList.map((item) => ({
id: item.proBill,
probillNumber: item.proBill,
}));

this.getCustomerDetailsbyId(data.customerId);
setTimeout(() => {
this.selectBillTo(data.customerBillingId);
}, 3000);

const transformedData: { [key: string]: any[] } = {};

data.proBillDTOList.forEach((item) => {
const { proBill } = item;

if (!transformedData[proBill]) {
transformedData[proBill] = [];
}

transformedData[proBill].push(item);
});

this.formDataBaisedonProbill = transformedData;

// console.log(this.formDataBaisedonProbill, "transformData")
this.orderDetailForm
.get("currentProbill")
.patchValue(this.generatedProbillNo[0].id);
this.prBillDrpDwnActive = false;
if (transformedData) {
const probillData =
transformedData[this.orderDetailForm.get("currentProbill").value];
this.previousValue = this.orderDetailForm.get("currentProbill").value;
 if (probillData && probillData.length > 0) {
this.patchFormData(probillData[0]);
} else {
console.error("No data found for the current probill");
}
}
});

let url2 =
ServerURLS.getManualOrderRate.action +
"?parentQuoteId=" +
this.parentQuoteOrderId;

this.scHttpService.getHttpService(url2, "").then((data: any) => {

console.log(data, "data2");

const paymentDetailsArray = this.orderDetailForm.get(

"paymentDetails"
) as FormArray;
paymentDetailsArray.clear();
data.forEach((rate: any) => {
if (!rate.chargeCode) {
let newRate = rate.price.match(/[\d.]+/)[0];
let totalCharge = 0;
totalCharge = totalCharge + rate.quantity * newRate;
let palletData = {
chargeName: rate.chargeItem,
price: newRate,
taxGroup: rate.taxGroup,
quantity: rate.quantity,
ac: rate.isAc === "true",
pd: rate.isPd === "true",
afs: rate.isAfs === "true",
fuelType: rate.isFscRatePecent === "true" ? "percentage" : "",
fuelCharge: parseFloat(rate.fscRate),
probill: rate.probill,
totalCharge: totalCharge,
};

this.outBoundInBoundChargeArray.push(palletData);

this.calculatePalletInBountOutBOundTax();
this.calculateTotalOutBoundInBoutnCharge();
} else {
const formGroup = this.addPaymentDetailsLine(rate.probill);
let newRate = rate.price.match(/[\d.]+/)[0];

let totalCharge = 0;
totalCharge = totalCharge + rate.quantity * newRate;

// this.outBoundInBoundChargeArray.forEach((element, index) => {

// if (element.chargeName) {
// totalCharge = totalCharge + (element.quantity * element.price)
// }
// })
formGroup.patchValue({
chargeItem: rate.chargeCode,
price: newRate,
taxGroup:
 rate.taxGroup == 5
? "GST 5"
: rate.taxGroup == 13
? "HST 13"
: rate.taxGroup == 15
? "HST 15"
: "NO TAX",
quantity: rate.quantity,
ac: rate.isAc === "true",
pd: rate.isPd === "true",
afs: rate.isAfs === "true",
fuelType: rate.isFscRatePecent === "true" ? "percentage" : "",
fuelCharge: rate.fscRate,
probill: rate.probill,
totalCharge: totalCharge,
});

// Push the form group to the paymentDetailsArray

paymentDetailsArray.push(formGroup);

setTimeout(() => {
this.calculateTotalChargeInPayment();
}, 2000);
}
});
});
}

const getTaxListUrl = ServerURLS.getTaxList.action;

this.scHttpService.getTaxList(getTaxListUrl).subscribe((res: any) => {
this.allTaxList = res;
this.defaultTaxGroup = this.allTaxList.length
? this.allTaxList.find(
(data) => data.taxPercent == this.globalTaxPercentage
)
: {
taxName: "NO TAX",
taxPercent: 0,
};
res.forEach((element) => {
this.allTaxListMap[element.taxName] = {
taxPercent: element.taxPercent,
totalAmount: "0.00",
tax: "0.00",
};
});
});
this._loaderService.stringSubject.next(true);
// this.orderDetailForm = new FormGroup({
// searchCustomer:[''],
// shippers: new FormArray([this.createShipper()]),
// consignees: new FormArray([this.createConsignee()])
// })
this.modalService.dismissAll();
const current = new Date();
let dd = String(current.getDate()).padStart(2, "0");
let mm = String(current.getMonth() + 1).padStart(2, "0"); //January is 0!
let yyyy = current.getFullYear();
this.todaysDate = this.minDate = yyyy + "-" + mm + "-" + dd;
this.config.minDate = {
month: current.getMonth() + 1,
day: current.getDate(),
year: current.getFullYear(),
};
this.config.outsideDays = "hidden";
this.orderDetailForm = this.formBuilder.group({
searchCustomer: ["", [Validators.required]],
billTo: ["", [Validators.required]],
currentProbill: ["", [Validators.required]],
// callersName: ['', [Validators.required]],
poNumber: ["", [Validators.required]],
shippers: new FormArray([this.createShipper()]),
consignees: new FormArray([this.createConsignee()]),
shipmentItem: this.formBuilder.array([this.addShipmentItemLine()]),
paymentDetails: this.formBuilder.array([]),
baseCharges: [""],
fscAmount: [""],
taxAmount: [""],
totalCharges: [""],
isFrieghtBillAudited: [false],
additionalCurrency: ["CAD"],
});
this.detailsForm = this.formBuilder.group({
locationTypeStart: [""],
locationTypeEnd: [""],
shipperAddressBook: [""],
consigneeAddressBook: [""],
consigneeAddress: [""],
shipperAddress: [""],
});
this.fuelChargeFrom = this.formBuilder.group({
fuelType: ["", [Validators.required]],
fuelAmount: [
"",
[
Validators.required,
,
Validators.pattern(/^(?=.+)(?:[1-9]\d*|0)?(?:\.\d+)?$/),
],
],
});
this.saveQuoteDataObj = {
sourceAddress: {
zipCode: "",
city: "",
state: "",
country: "",
addrTypeId: "",
},
destinationAddress: {
zipCode: "",
city: "",
state: "",
country: "",
addrTypeId: "",
},
delvryForm: {
 pickupDate1: {
year: 2021,
month: 7,
day: 25,
},
pickupDate: "2021-07-25",
pickupFromTime: "c7b3e35a-f7ed-11e9-8462-163046d26cd4",
pickupToTime: "c7b3e641-f7ed-11e9-8462-163046d26cd4",
quoteId: null,
deliveryId: null,
},
items: [],
shipmentMode: null,
shpmtTypeId: null,
shpmtPackagingTypeId: null,
shipmentSubPackageCode: null,
hasSourceServicesOpted: false,
hasDestServicesOpted: false,
extraServices: ["3554118c-f312-11e9-8462-163046d26cd4"],
shipperCompanyId: null,
consigneeCompanyId: null,
};
this.found = "";
this.found2 = "";
this.addressData = [];
this.ConsigneeAddressData = [];
this.displayCourier = true;
this.saveQuoteDataObj["sourceAddress"]["fullAddr"] = {};
this.saveQuoteDataObj["destinationAddress"]["fullAddr"] = {};
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][0] = "";
this.saveQuoteDataObj["destinationAddress"]["fullAddr"][0] = "";
this.shipAgainQuoteID =
this.activatedRoute.snapshot.paramMap.get("quoteId");
this.latlng[0] = [43.849902, -79.393173]; //set to shipcarte office for now.
this.origin = { lat: 0, lng: 0 };
this.destination = { lat: 0, lng: 0 };
var g = document.createElement("div");
g.setAttribute("id", "map");
var map = new google.maps.Map(g, {});
this.mapService = new google.maps.places.PlacesService(map);
// this.getBussinessAccessrialpackageTypeDetail();
this.getAllServiceMapPackageType();

// this.getLocation();
this.getLocationType();
this.getfrieghtClass();
this.getShippingHours();
this.getPickupList();

// if (localStorage.getItem('_adminstep1Data')) {
// this.backToStep1 = true;
// this.step1DataLs = JSON.parse(localStorage.getItem('_adminstep1Data'));
// this.populateStep1DataLs(this.step1DataLs)
// let globalFooterData =
JSON.parse(sessionStorage.getItem('_adminnewOrderGlobalFooterData'));
// this.selectedShmtMode = globalFooterData.mode;
// this.totalOfQuantity = globalFooterData.pieceCount;
// this.totalofLength = globalFooterData.linearFeet.totalLength;
// this.totalofWidth = globalFooterData.linearFeet.totalWidth;
 // this.totalofHeight = globalFooterData.linearFeet.totalHeight;
// this.totalOfWeight = globalFooterData.totalWeight;
// this.totalClass = globalFooterData.class;
// this.totalofShipmentValue = globalFooterData.shipmentValue;
// }

let urlArr = window.location.href.split("/");

if (
urlArr[urlArr.length - 3] == "edit" ||
urlArr[urlArr.length - 2] == "execute"
) {
if (!this.shipAgain) {
this.screenTitle = "Order Pending";
}
this.assignSaveBtn = "Save Edits";
// let url = '';
// if(urlArr[urlArr.length - 2] == 'edit'){
// url = ServerURLS.fetchBookedManualOrderDetail.action + '?orderId=' +
this.activatedRoute.snapshot.paramMap.get('orderId');
// }else if(urlArr[urlArr.length - 2] == 'execute'){
// url = ServerURLS.fetchBookedManualOrderDetail.action + '?quoteId=' +
this.activatedRoute.snapshot.paramMap.get('quoteId');
// }
let url =
ServerURLS.fetchBookedManualOrderDetail.action +
"?quoteId=" +
this.activatedRoute.snapshot.paramMap.get("quoteId");
this.scHttpService
.getHttpService(url, "")
.then((result: any) => {
this.editOrder = true;
let property = "hopIndex";
let direction = 1;

// this.objToPopulateData = {
// selectedCustomerId: result.customerId,
// customerName: '',
// billTo: result.customerBillingId,
// primaryContact: '',
// primaryPhone: '',
// primaryEmail: '',
// callersName: result.callerName ? result.callerName : '',
// poNumber: result.poNumber ? result.poNumber : '',
// shmtMode: { //call selectShmt fn with the below data
// index: '',
// shmtData: ''
// },

// pkgType: { //call selectPkgType fn with the below data

// index: '',
// pkgData: ''
// },

// shippers: '',
// consignees: '',

// shipmentItems: '',

// paymentDetails: '',
 // additionalDetails: ''
// };

// fetch all the paymentDetails

// let quoteId = sessionStorage.getItem('_admineditOrderQuoteId') ?
sessionStorage.getItem('_admineditOrderQuoteId') :
this.activatedRoute.snapshot.paramMap.get('quoteId');
//let fetchPaymentDetailsUrl =
ServerURLS.getBillingInfoCarrierInvoice.action + "?quoteId=" + quoteId +
"&customerId=" + this.objToPopulateData.selectedCustomerId;
// this.scHttpService.getHttpService(fetchPaymentDetailsUrl,
'').then((result: any) => {
// let chargesList = result.charges;

// //ready paymentDetails Array with API Data

// let paymentDetailsArr = [];
// chargesList.forEach((individualCharge, index) => {
// if (individualCharge.chargeCode != "") { //if the charge is added
by the admin, then divide the price with quantity
// individualCharge.price = individualCharge.price.split(' ');
// individualCharge.price = parseFloat(individualCharge.price[0]) /
parseInt(individualCharge.quantity);
// }
// let quantity = 0;

// if ((individualCharge.chargeItem.includes('Outbound') &&
individualCharge.chargeItem.includes('Pallet') ||
(individualCharge.chargeItem.includes('Inbound') &&
individualCharge.chargeItem.includes('Pallet')))) {
//
this.totalAmountOfOutBountAndInBound=this.totalAmountOfOutBountAndInBound+parseFloa
t(individualCharge.price)
// quantity = parseInt(String(parseFloat(individualCharge.price) /
7.5))
// individualCharge.price = parseFloat(individualCharge.price) /
quantity;
// } else if (((individualCharge.chargeItem.includes('Inbound') &&
individualCharge.chargeItem.includes('Box')) ||
(individualCharge.chargeItem.includes('Outbound') &&
individualCharge.chargeItem.includes('Box')))) {
//
this.totalAmountOfOutBountAndInBound=this.totalAmountOfOutBountAndInBound+parseFloa
t(individualCharge.price)
// quantity = parseInt(String(parseFloat(individualCharge.price) /
1.5))
// individualCharge.price = parseFloat(individualCharge.price) /
quantity;
// } else {
// quantity = parseInt(individualCharge.quantity)
// }
// let singleChargeObj = {
// "ac": individualCharge.isAc == "true" ? true : false,
// "afs": individualCharge.isAfs == "true" ? true : false,
// "chargeItem": individualCharge.chargeCode,
// "fuelCharge": individualCharge.fscRate,
// "fuelType":
individualCharge.isFscRatePecent=='false'?'fixed':'percentage', //string value
// "newLine": true, //boolean value
// "pd": individualCharge.isPd == "true" ? true : false, //boolean
value
// "price": parseFloat(individualCharge.price), //number value
// "probill": "", //string value
// "quantity": quantity, //number value
// "taxGroup": individualCharge.taxGroup == null ||
individualCharge.taxGroup == "" ? "" : individualCharge.taxGroup, //string value
// "autoChargeItem": individualCharge.chargeCode == "" ?
individualCharge.chargeItem : "",
// "isAutoChargeItem": individualCharge.chargeCode == "" ? true :
false
// }
// if(individualCharge.chargeCode!='eb833531-1226-407c-96d9-
dd261cc006b1'){
// paymentDetailsArr.push(singleChargeObj)
// }else if(individualCharge.chargeCode=='eb833531-1226-407c-96d9-
dd261cc006b1'){
// this.totalFSCAmount=parseFloat(individualCharge.price)
// this.orderDetailForm.patchValue(({
// fscAmount:parseFloat(individualCharge.price)
// }))
// }
// });

// //set Payment Details data

// paymentDetailsArr.forEach((paymentRowObj, index) => {
// if (index != 0) {
// this.addLinePaymentDetailsByClick()
// }
// this.orderDetailForm.get('paymentDetails')['controls']
[index].patchValue({
// chargeItem: paymentRowObj.chargeItem,
// probill: paymentRowObj.probill,
// chargeDescription: paymentRowObj.chargeDescription,
// quantity: paymentRowObj.quantity,
// autoChargeItem: paymentRowObj.autoChargeItem,
// isAutoChargeItem: paymentRowObj.isAutoChargeItem
// });
// setTimeout(() => {
// this.priceAndQuantityInput(index, 'quantity',
paymentRowObj.quantity)
// }, 1000);
// this.orderDetailForm.get('paymentDetails')['controls'][index]
['controls'].price.patchValue(paymentRowObj.price);
// setTimeout(() => {
// this.priceAndQuantityInput(index, 'price', paymentRowObj.price)
// }, 1000);
// this.orderDetailForm.get('paymentDetails')['controls']
[index].patchValue({
// ac: paymentRowObj.ac,
// pd: paymentRowObj.pd,
// afs: paymentRowObj.afs,
// fuelType: paymentRowObj.fuelType,
// fuelCharge: paymentRowObj.fuelCharge,
// taxGroup: paymentRowObj.taxGroup,
// totalCharge: paymentRowObj.totalCharge,
// newLine: paymentRowObj.newLine
// });
// setTimeout(() => {
// if (paymentRowObj.isAutoChargeItem) {
 // this.setChargeDesctiption(paymentRowObj.autoChargeItem, index,
true);
// } else {// if the charge added by admin
// this.setChargeDesctiption(paymentRowObj.chargeItem, index);
// }
// }, 1000);
// });
// }).catch((error) => {
// throw error;
// });

// fetch all the customerDetails and set customerId, customerName to the

form in FE.
//
this.getCustomerDetailsbyId(this.objToPopulateData.selectedCustomerId);

// set callersName and poNumber

// this.orderDetailForm.patchValue({
// callersName: this.objToPopulateData.callersName,
// poNumber: this.objToPopulateData.poNumber
// });
// set the billTo data and primary Contact/Phone/Email data according to
the selected billTo option.
// setTimeout(() => {
// this.selectBillTo(this.objToPopulateData.billTo)
// }, 3000);

// find and set the index value and data of shipmentMode

// setTimeout(() => {
// this.shpmntModePkgTypeData.forEach((shpmntModePkgType, i) => {
// if (result.shipmentMode == shpmntModePkgType.shippingModeId) {
// this.objToPopulateData['shmtMode']['index'] = i;
// this.objToPopulateData['shmtMode']['shmtData'] =
shpmntModePkgType;
// this.selectShmt(this.objToPopulateData.shmtMode.index,
this.objToPopulateData.shmtMode.shmtData);
// }
// });
// }, 3000);

// ready shipper object in shippers array

let shippers = [];
// sort the array with hopIndex
// result.sourceAddress.sort(function (a, b) {
// if (parseFloat(a[property]) < parseFloat(b[property])) {
// return -1 * direction;
// }
// else if (parseFloat(a[property]) > parseFloat(b[property])) {
// return 1 * direction;
// }
// else {
// return 0;
// }
// });

result.sourceAddress.forEach((individualShipper, shipperIndex) => {

// this.getAccessforialList(shipperIndex, 'byButton',
individualShipper.addrTypeId);
let accArray = [];
 accArray = this.getAccessrailListToPopulateData(
shipperIndex,
"start",
individualShipper.addrTypeId,
individualShipper.extraServices
);
let pickupDateArr = individualShipper.pickupDate.split("-");

let singleShipperObj: any = {

shipperAddrType: individualShipper.addrTypeId,
shipperPickupDate: {
year: parseInt(pickupDateArr[0]),
month: parseInt(pickupDateArr[1]),
day: parseInt(pickupDateArr[2]),
},
shipperPickupFromTime: individualShipper.fromTime,
shipperPickupToTime: individualShipper.toTime,
zipCode: individualShipper.zipCode,
city: individualShipper.city,
state: individualShipper.state,
country: individualShipper.country,
fullAddr: individualShipper.fullAddr,
addrLine1: individualShipper.addrLine1,
addrLine2: individualShipper.addrLine2,
latitude: parseFloat(individualShipper.latitude),
longitude: parseFloat(individualShipper.longitude),
extraServices: individualShipper.extraServices,
company: individualShipper.company,
// "hopIndex": individualShipper.hopIndex,
companyId: individualShipper.companyId,
accessorialsData: accArray,
selectedAddrGoogleManual:
individualShipper.googleMapId != "" ? "google" : "manual",
googleMapId: individualShipper.googleMapId,
addressId: individualShipper.addressId,
};

shippers.push(singleShipperObj);
});

//set shipper data

shippers.forEach((shipperObj, index) => {
if (index != 0) {
this.onAddMoreShipper(index);
}
if (shipperObj.selectedAddrGoogleManual == "manual") {
this.clickEventShipper(index);
this.checkshipperAddressBook(index);
this.isAddressBookShipper.push(index);
this.shipperToggleBoolean = true;
} else {
//set latitude and longitude for google map
this.shipperMarkers.push({
lat: shipperObj.latitude,
lng: shipperObj.longitude,
label: (index + 1).toString(),
index: index,
});
}
 let obj = {
// hopIndex: shipperObj.hopIndex,
fullAddr: shipperObj.fullAddr,
zipCode: shipperObj.zipCode,
city: shipperObj.city,
state: shipperObj.state,
country: shipperObj.country,
addrLine1: shipperObj.addrLine1,
addrLine2: shipperObj.addrLine2,
latitude: shipperObj.latitude,
longitude: shipperObj.longitude,
extraServices: shipperObj.extraServices,
company: shipperObj.company,
companyId: shipperObj.companyId,
shipperAddrType: shipperObj.shipperAddrType,
shipperPickupDate: shipperObj.shipperPickupDate,
shipperPickupFromTime: shipperObj.shipperPickupFromTime,
shipperPickupToTime: shipperObj.shipperPickupToTime,
googleMapId: shipperObj.googleMapId,
addressId: shipperObj.addressId,
};
setTimeout(() => {
this.orderDetailForm
.get("shippers")
["controls"][index].patchValue(obj);
}, 4000);

setTimeout(() => {
this.setBusinessType(
shipperObj.hopIndex,
shipperObj.shipperAddrType
);
}, 3000);
setTimeout(() => {
this.accessorialsData[index] = shipperObj.accessorialsData;
}, 4000);
});

// ready consignee object in consignees array

let consignees = [];
// sort the array with hopIndex
// result.destinationAddress.sort(function (a, b) {
// if (parseFloat(a[property]) < parseFloat(b[property])) {
// return -1 * direction;
// }
// else if (parseFloat(a[property]) > parseFloat(b[property])) {
// return 1 * direction;
// }
// else {
// return 0;
// }
// });
result.destinationAddress.forEach(
(individualConsignee, consigneeIndex) => {
// make below thing dynamic
// individualConsignee.companyId = "a0b4fda3-12aa-4871-baef-
bb0dd56d585b";
// this.getAccessforialList(consigneeIndex, 'byButton',
individualConsignee.addrTypeId);
let accArray = [];
accArray = this.getAccessrailListToPopulateData(
consigneeIndex,
"end",
individualConsignee.addrTypeId,
individualConsignee.extraServices
);

let pickupDateArr = individualConsignee.pickupDate.split("-");

let singleConsigneeObj: any = {
consigneeAddrType: individualConsignee.addrTypeId,
consigneePickupDate: {
year: parseInt(pickupDateArr[0]),
month: parseInt(pickupDateArr[1]),
day: parseInt(pickupDateArr[2]),
},
consigneePickupFromTime: individualConsignee.fromTime,
consigneePickupToTime: individualConsignee.toTime,
zipCode: individualConsignee.zipCode,
city: individualConsignee.city,
state: individualConsignee.state,
country: individualConsignee.country,
fullAddr: individualConsignee.fullAddr,
addrLine1: individualConsignee.addrLine1,
addrLine2: individualConsignee.addrLine2,
latitude: parseFloat(individualConsignee.latitude),
longitude: parseFloat(individualConsignee.longitude),
extraServices: individualConsignee.extraServices,
company: individualConsignee.company,
// "hopIndex": individualConsignee.hopIndex,
companyId: individualConsignee.companyId,
accessorialsDataCon: accArray,
selectedAddrGoogleManual:
individualConsignee.googleMapId != "" ? "google" : "manual",
googleMapId: individualConsignee.googleMapId,
addressId: individualConsignee.addressId,
};
// singleConsigneeObj.accessorialsDataCon =
this.accessorialsDataCon[individualConsignee.hopIndex];
// debugger
consignees.push(singleConsigneeObj);
}
);

//set consignee data

consignees.forEach((consigneeObj, index) => {
if (index != 0) {
this.onAddMoreConsignee(index);
}
if (consigneeObj.selectedAddrGoogleManual == "manual") {
this.clickEventConsignee(index);
this.checkConsigneeAddressBook(index);
this.isAddressBookConsignee.push(index);
this.consigneeToggleBoolean = true;
} else {
//set latitude and longitude for google map
this.consigneeToggleBoolean = false;
this.consigneeMarkers.push({
 lat: consigneeObj.latitude,
lng: consigneeObj.longitude,
label: (index + 1).toString(),
index: index,
});
}

let obj = {
// hopIndex: consigneeObj.hopIndex,
fullAddr: consigneeObj.fullAddr,
zipCode: consigneeObj.zipCode,
city: consigneeObj.city,
state: consigneeObj.state,
country: consigneeObj.country,
addrLine1: consigneeObj.addrLine1,
addrLine2: consigneeObj.addrLine2,
latitude: consigneeObj.latitude,
longitude: consigneeObj.longitude,
extraServices: consigneeObj.extraServices,
company: consigneeObj.company,
companyId: consigneeObj.companyId,
consigneeAddrType: consigneeObj.consigneeAddrType,
consigneePickupDate: consigneeObj.consigneePickupDate,
consigneePickupFromTime: consigneeObj.consigneePickupFromTime,
consigneePickupToTime: consigneeObj.consigneePickupToTime,
googleMapId: consigneeObj.googleMapId,
addressId: consigneeObj.addressId,
};

setTimeout(() => {
this.orderDetailForm
.get("consignees")
["controls"][index].patchValue(obj);
}, 4000);

setTimeout(() => {
this.setBusinessTypeInCon(
consigneeObj.hopIndex,
consigneeObj.consigneeAddrType
);
}, 3000);
setTimeout(() => {
this.accessorialsDataCon[index] =
consigneeObj.accessorialsDataCon;
}, 4000);
});

// ready shipmentItems object in shipmentItems array

let shipmentItems = [];
let shmtItemsLength = result.items.length;
result.items.sort((a, b) => a.displayOrder - b.displayOrder);
result.items.forEach((individualItem, itemIndex) => {
if (individualItem.packaging == null) {
//in the case of courier
individualItem.packaging = individualItem.crsPackageId;
}

// find and set the index value and data of shpmtpkgType

if (itemIndex == shmtItemsLength - 1) {
 // debugger
setTimeout(() => {
this.pkgTypes.forEach((pkgType, i) => {
// debugger
if (individualItem.packaging == pkgType.packagingId) {
// debugger
this.objToPopulateData["pkgType"]["index"] = i;
this.objToPopulateData["pkgType"]["pkgData"] = pkgType;
this.selectPkgType(
this.objToPopulateData.pkgType.index,
this.objToPopulateData.pkgType.pkgData,
true
);
}
});
}, 3000);
}

let shpmtItem = {
packageName: individualItem.packaging,
quantity: individualItem.qty,
weight: individualItem.totalWeight,
width: individualItem.breadth,
length: individualItem.length,
height: individualItem.height,
description: individualItem.description,
shipmentValue: individualItem.shipmentItemValue,
shipmentValueCurrencyCode:
individualItem.shipmentItemValueCurrency,
class: individualItem.freightClass,
nmfc: individualItem.nmfc == null ? "" : individualItem.nmfc,
stackable: individualItem.stackable,
hazmat: individualItem.hazMat,
hazmatNU:
individualItem.unNumType == null
? ""
: individualItem.unNumType,
hazmatUNNumber:
individualItem.unNumber == null ? "" : individualItem.unNumber,
hazmatShipperName:
individualItem.properShippingName == null
? ""
: individualItem.properShippingName,
hazmatHazardClass:
individualItem.hazardClass == null
? ""
: individualItem.hazardClass,
hazmatPackageGroup:
individualItem.packageGroup == null
? ""
: individualItem.packageGroup,
hazmatPackageType:
individualItem.hazardPackagingType == null
? ""
: individualItem.hazardPackagingType,
quoteItemId: individualItem.quoteItemId,
};
shipmentItems.push(shpmtItem);
});
//set measurementType and shipmentItems data
this.setUnitValue(result.items[0].lengthType);
setTimeout(() => {
shipmentItems.forEach((shmntItemObj, index) => {
if (index != 0) {
this.addLineShipmentItembyClick();
}
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
packageName: shmntItemObj.packageName,
quantity: shmntItemObj.quantity,
});
this.calculateTotalQuantity("quantity");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
weight: shmntItemObj.weight,
});
this.calculateTotalQuantity("weight");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
width: shmntItemObj.width,
});
this.calculateTotalQuantity("width");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
length: shmntItemObj.length,
});
this.calculateTotalQuantity("length");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
height: shmntItemObj.height,
});
this.calculateTotalQuantity("height");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
shipmentValue: shmntItemObj.shipmentValue,
});
this.calculateTotalQuantity("shipmentValue");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
description: shmntItemObj.description,
shipmentValueCurrencyCode:
shmntItemObj.shipmentValueCurrencyCode,
class: shmntItemObj.class,
nmfc: shmntItemObj.nmfc,
stackable: shmntItemObj.stackable,
hazmat: shmntItemObj.hazmat,
hazmatNU: shmntItemObj.hazmatNU,
hazmatUNNumber: shmntItemObj.hazmatUNNumber,
hazmatShipperName: shmntItemObj.hazmatShipperName,
hazmatHazardClass: shmntItemObj.hazmatHazardClass,
 hazmatPackageGroup: shmntItemObj.hazmatPackageGroup,
hazmatPackageType: shmntItemObj.hazmatPackageType,
quoteItemId: shmntItemObj.quoteItemId,
});
});
}, 3500);
setTimeout(() => {

this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
}, 4000);
})
.catch((error) => {
throw error;
});

// let url2 = ServerURLS.orderDetails.action + '?quoteId=' +

JSON.parse(sessionStorage.getItem('editOrderQuoteId'));
}
this.getCustomerListByName("");
}

getChargeItemByCode(chargeCode: string): string {

if (!chargeCode) return "";
const charge = this.chargeList.find(
(charge) => charge.chargeId === chargeCode
);
return charge ? charge.chargeName : "";
}

getTaxGroupByPercent(taxPercent: string): string {

const taxGroup = this.allTaxList.find(
(tax) => tax.taxPercent === parseFloat(taxPercent)
);
return taxGroup ? taxGroup.taxName : "NO TAX";
}

ngAfterViewInit() {
fromEvent(this.searchElement.nativeElement, "keyup")
.pipe(
filter(Boolean),
debounceTime(500),
distinctUntilChanged(),
tap((event: KeyboardEvent) => {
let url1 =
ServerURLS.getCustomerListAdmin.action +
"/0/50?status=Active&query=" +
this.searchElement.nativeElement.value;
let promsie = this.scHttpService.getHttpService(url1, "");
promsie
.then((res: any) => {
this.carrierDetailList = [];
this.displayData = false;
this._loaderService.stringSubject.next(false);
let customerList = res.response;
this.carrierDetailList.push(customerList);
})
.catch((err: any) => {});
})
)
 .subscribe();
}

currentCustomer;
selectCustomer(customer) {
this.currentCustomer = customer;
console.log(customer, "ss");
if (this.generatedProbillNo.length === 0) {
this.pickupDelMode = 0;
this.setProbill(customer.customer_id);
}

this.shipConsAdderss(customer.customer_id);
this.getCustomerDetailsbyId(customer.customer_id);
this.orderDetailForm
.get("searchCustomer")
.patchValue(customer.customer_name);
this.selectedValue = customer.customer_name;
this.setBusinessTypeInCon(0, this.locationType[0].locId);
this.shown = false;
this.calculateTotolFuelSurchargeInPaymentDetials();
}
ngOnDestroy() {
if (this.checkDestroyReason === "normal") {
sessionStorage.removeItem("_adminnewOrderCustomerId");
sessionStorage.removeItem("_adminnewOrderOrderId");
sessionStorage.removeItem("_adminnewOrderQuoteId");
sessionStorage.removeItem("_adminnewOrderGlobalFooterData");
sessionStorage.removeItem("_adminnewOrderShipmentModeId");
sessionStorage.removeItem("_admincarrierCreate");
localStorage.removeItem("_adminstep2Data");
localStorage.removeItem("_adminstep1Data");
sessionStorage.removeItem("_admineditOrderQuoteId");
}
}
prBillDrpDwnActive: boolean = true;

formDataBaisedonProbill: any = {};

currentSelectedProbill: any;
selectedProbiss = [];

onCreateProbill(id: any) {
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.enable();
setTimeout(() => {
this.pickupDelMode = id.id;
}, 2000);
this.setFromDataOnChangeProBill("create");
this.resetDataBasedOnProbill(id);
this.setProbill();
}

resetDataBasedOnProbill(key) {
const shippers = this.orderDetailForm.get("shippers") as FormArray;
const consignees = this.orderDetailForm.get("consignees") as FormArray;
if (key.id == 1) {
const consignee = consignees.at(0);
consignee.patchValue({
 zipCode: null,
city: null,
state: null,
country: null,
fullAddr: "",
addrLine1: "",
addrLine2: "",
latitude: "",
longitude: "",
addrTypeId: null,
});
const consignees1 = this.orderDetailForm.get("consignees") as FormArray;
consignees1.clear();
consignees1.push(this.createConsignee());
this.accessorialsDataCon = [];
} else if (key.id == 2) {
const shipper = shippers.at(0);
shipper.patchValue({
zipCode: null,
city: null,
state: null,
country: null,
fullAddr: "",
addrLine1: "",
addrLine2: "",
latitude: "",
longitude: "",
addrTypeId: "",
});
const consignees2 = this.orderDetailForm.get("shippers") as FormArray;
consignees2.clear();
consignees2.push(this.createShipper());
this.accessorialsData = [];
} else if (key.id == 3) {
const shipper = shippers.at(0);
const consignee = consignees.at(0);
shipper.patchValue({
pickupDeliveryInfoId: "",
});

consignee.patchValue({
pickupDeliveryInfoId: "",
});
const shipperValues = shipper.value;

shipper.patchValue(consignee.value);
consignee.patchValue(shipperValues);

this.accessorialsDataCon = [];
this.accessorialsData = [];
} else if (key.id == 4) {
const shipper = shippers.at(0);
const consignee = consignees.at(0);

shipper.patchValue(shipper.value);
consignee.patchValue(consignee.value);
this.accessorialsDataCon = [];
this.accessorialsData = [];
}
 const shipmentItem = this.orderDetailForm.get("shipmentItem") as FormArray;
const packageNameValue =
shipmentItem.at(0).get("packageName").value || null;
shipmentItem.clear();
const newShipmentItem = this.addShipmentItemLine();
if (packageNameValue) {
this.totalOfQuantity = 1;
this.totalOfWeight = 0;
this.totalofShipmentValue = 0;
newShipmentItem.get("packageName").setValue(packageNameValue);
}
shipmentItem.push(newShipmentItem);
this.orderDetailForm.get("poNumber").reset();

setTimeout(() => {
this.calculateOutBoundAndInBoundCharge();
// this.appendElementInOutBoundArray();
}, 1000);
// this.handlePalletInOutBound();
}

// resetDataBasedOnProbill(key) {
// if (key.id == 1) {
// const consignees = this.orderDetailForm.get('consignees') as FormArray;
// consignees.clear();
// consignees.push(this.createConsignee());

// this.appendElementInOutBoundArray();

// }
// else if (key.id == 2) {
// const consignees = this.orderDetailForm.get('shippers') as FormArray;
// consignees.clear();
// consignees.push(this.createShipper());

// this.appendElementInOutBoundArray();

// }
// else if (key.id == 3) {
// const shippers = this.orderDetailForm.get('shippers') as FormArray;
// const consignees = this.orderDetailForm.get('consignees') as FormArray;
// const shipper = shippers.at(0);
// const consignee = consignees.at(0);
// const shipperValues = {
// zipCode: shipper.get('zipCode').value,
// city: shipper.get('city').value,
// state: shipper.get('state').value,
// country: shipper.get('country').value,
// fullAddr: shipper.get('fullAddr').value,
// addrLine1: shipper.get('addrLine1').value,
// addrLine2: shipper.get('addrLine2').value,
// latitude: shipper.get('latitude').value,
// longitude: shipper.get('longitude').value,
// addrTypeId: shipper.get('addrTypeId').value
// };

// // Swap values
// shipper.get('zipCode').setValue(consignee.get('zipCode').value);
 // shipper.get('city').setValue(consignee.get('city').value);
// shipper.get('state').setValue(consignee.get('state').value);
// shipper.get('country').setValue(consignee.get('country').value);
// shipper.get('fullAddr').setValue(consignee.get('fullAddr').value);
// shipper.get('addrLine1').setValue(consignee.get('addrLine1').value);
// shipper.get('addrLine2').setValue(consignee.get('addrLine2').value);
// shipper.get('latitude').setValue(consignee.get('latitude').value);
// shipper.get('longitude').setValue(consignee.get('longitude').value);
// shipper.get('addrTypeId').setValue(consignee.get('addrTypeId').value);

// consignee.get('zipCode').setValue(shipperValues.zipCode);
// consignee.get('city').setValue(shipperValues.city);
// consignee.get('state').setValue(shipperValues.state);
// consignee.get('country').setValue(shipperValues.country);
// consignee.get('fullAddr').setValue(shipperValues.fullAddr);
// consignee.get('addrLine1').setValue(shipperValues.addrLine1);
// consignee.get('addrLine2').setValue(shipperValues.addrLine2);
// consignee.get('latitude').setValue(shipperValues.latitude);
// consignee.get('longitude').setValue(shipperValues.longitude);
// consignee.get('addrTypeId').setValue(shipperValues.addrTypeId);
// this.appendElementInOutBoundArray();

// }

// else if (key.id == 4) {

// this.appendElementInOutBoundArray();

// }

// const shipmentItem = this.orderDetailForm.get('shipmentItem') as FormArray;

// const packageNameValue = shipmentItem.at(0).get('packageName').value ||
null;
// shipmentItem.clear();
// const newShipmentItem = this.addShipmentItemLine();
// if (packageNameValue) {
// this.totalOfQuantity=1;
// this.totalOfWeight=0;
// this.totalofShipmentValue=0;
// newShipmentItem.get('packageName').setValue(packageNameValue);
// }

// shipmentItem.push(newShipmentItem);

// this.orderDetailForm.get('poNumber').reset();
// this.calculateOutBoundAndInBoundCharge();

// }

setProbill(customerId?) {
setTimeout(() => {
let selectedCustomer = customerId ? customerId : this.selectedCustomerId;

let url =
ServerURLS.generateProbill.action + "?customerId=" + selectedCustomer;
this.scHttpService
.getHttpService(url, "")
.then((result: any) => {
console.log(result, "API response");
 if (result) {
let probillNumber = result.proBill;
this.generatedProbillNo.push({
id: probillNumber,
probillNumber: probillNumber,
});

this.prBillDrpDwnActive = false;
this.orderDetailForm
.get("currentProbill")
.patchValue(probillNumber);
this.currentSelectedProbill = probillNumber;
this.selectedProbiss.push(probillNumber);

setTimeout(() => {
this.addLinePaymentDetailsByClick(probillNumber);
}, 3000);
} else {
console.error("Unexpected API response format", result);
throw new Error("Invalid API response");
}
})
.catch((error) => {
console.error("API call failed", error);
});
}, 2000);
}

// setFromDataOnChangeProBill(type: string) {
// console.log(this.orderDetailForm.value, "kkk");
// const copyData = JSON.parse(JSON.stringify(this.orderDetailForm.value));
// if (!this.formDataBaisedonProbill) {
// this.formDataBaisedonProbill = {};
// }
// const currentProbill = this.orderDetailForm.get('currentProbill').value;

// if (!this.formDataBaisedonProbill[currentProbill]) {
// this.formDataBaisedonProbill[currentProbill] = [];
// }
// if (this.formDataBaisedonProbill.length == 1) {
// this.pickupDelMode = 0;
// }

// console.log(this.generatedProbillNo.length, "length")
// this.formDataBaisedonProbill[currentProbill].push({
// orderDetailForm: copyData,
// customer: this.currentCustomer,
// pickupDelMode: this.pickupDelMode,
// shpmntModePkgTypeData: this.shpmntModePkgTypeData,
// selectedShmtIndexForStep1: this.selectedShmtIndexForStep1,
// pkgTypes: this.pkgTypes,
// accessorialShipperData:this.accessorialsData[0],
// accessorialConsigneeData:this.accessorialsDataCon[0],
// selectedPkgDataForStep1: this.selectedPkgDataForStep1,
// selectedShmtDataForStep1: this.selectedShmtDataForStep1,
// pkgTypeSelectedArr: this.pkgTypeSelectedArr,
// selectedPkgIndexForStep1: this.selectedPkgIndexForStep1,
// availableCreditLimitInCAD: this.availableCreditLimitInCAD,
// availableCreditLimitInUSD: this.availableCreditLimitInUSD,
 // isCreditDisabled: this.isCreditDisabled,
// shmtModeSelectedArr: this.shmtModeSelectedArr,
// selectedPkgTypeId: this.selectedPkgTypeId,
// selectedShmtModeId: this.selectedShmtModeId,
// primaryPhone: this.primaryPhone,
// primaryEmail: this.primaryEmail,
// billingData: this.billingLocation,
// shipementIndex: this.selectedShmtIndexForStep1,
// });

// localStorage.setItem('probillData',
JSON.stringify(this.formDataBaisedonProbill));
// console.log(this.formDataBaisedonProbill, "probillArray");
// }

setFromDataOnChangeProBill(type: string) {
console.log(this.orderDetailForm.value, "kkk");
const copyData = JSON.parse(JSON.stringify(this.orderDetailForm.value));

if (!this.formDataBaisedonProbill) {
this.formDataBaisedonProbill = {};
}

const currentProbill = this.orderDetailForm.get("currentProbill").value;

if (type == "create") {
this.formDataBaisedonProbill[currentProbill] = [];
this.formDataBaisedonProbill[currentProbill].push({
orderDetailForm: copyData,
customer: this.currentCustomer,
pickupDelMode: this.pickupDelMode || 0,
shpmntModePkgTypeData: this.shpmntModePkgTypeData,
selectedShmtIndexForStep1: this.selectedShmtIndexForStep1,
pkgTypes: this.pkgTypes,
accessorialShipperData: this.accessorialsData[0],
accessorialConsigneeData: this.accessorialsDataCon[0],
selectedPkgDataForStep1: this.selectedPkgDataForStep1,
selectedShmtDataForStep1: this.selectedShmtDataForStep1,
pkgTypeSelectedArr: this.pkgTypeSelectedArr,
selectedPkgIndexForStep1: this.selectedPkgIndexForStep1,
availableCreditLimitInCAD: this.availableCreditLimitInCAD,
availableCreditLimitInUSD: this.availableCreditLimitInUSD,
isCreditDisabled: this.isCreditDisabled,
shmtModeSelectedArr: this.shmtModeSelectedArr,
selectedPkgTypeId: this.selectedPkgTypeId,
selectedShmtModeId: this.selectedShmtModeId,
primaryPhone: this.primaryPhone,
primaryEmail: this.primaryEmail,
billingData: this.billingLocation,
shipementIndex: this.selectedShmtIndexForStep1,
});

console.log("New entry created for probill:", currentProbill);

} else if (type == "update") {
this.formDataBaisedonProbill[this.previousValue][0] = {
orderDetailForm: copyData,
customer: this.currentCustomer,
pickupDelMode: this.pickupDelMode,
shpmntModePkgTypeData: this.shpmntModePkgTypeData,
 selectedShmtIndexForStep1: this.selectedShmtIndexForStep1,
pkgTypes: this.pkgTypes,
accessorialShipperData: this.accessorialsData[0],
accessorialConsigneeData: this.accessorialsDataCon[0],
selectedPkgDataForStep1: this.selectedPkgDataForStep1,
selectedShmtDataForStep1: this.selectedShmtDataForStep1,
pkgTypeSelectedArr: this.pkgTypeSelectedArr,
selectedPkgIndexForStep1: this.selectedPkgIndexForStep1,
availableCreditLimitInCAD: this.availableCreditLimitInCAD,
availableCreditLimitInUSD: this.availableCreditLimitInUSD,
isCreditDisabled: this.isCreditDisabled,
shmtModeSelectedArr: this.shmtModeSelectedArr,
selectedPkgTypeId: this.selectedPkgTypeId,
selectedShmtModeId: this.selectedShmtModeId,
primaryPhone: this.primaryPhone,
primaryEmail: this.primaryEmail,
billingData: this.billingLocation,
shipementIndex: this.selectedShmtIndexForStep1,
};

this.previousValue = currentProbill;
console.log("Probill updated at zero index:", currentProbill);
}

localStorage.setItem(
"probillData",
JSON.stringify(this.formDataBaisedonProbill)
);
console.log(this.formDataBaisedonProbill, "probillArray");

if (type === "update") {

this.currentSelectedProbill =
this.orderDetailForm.get("currentProbill").value;
}

this.cdr.detectChanges();
}

//my code

patchFormData(probillData: any) {
console.log(this.formDataBaisedonProbill, "probillArray");

console.log(probillData, "latestPatchData");
if (this.parentQuoteOrderId && probillData && probillData.callerName) {
this.orderDetailForm
.get("searchCustomer")
.patchValue(this.selectedCustomerName);
this.orderDetailForm.patchValue({
searchCustomer: this.selectedCustomerName,
callersName: probillData.callerName,
poNumber: probillData.poNumber,
});
(this.pickupDelMode = probillData.pickupDelMode),
(this.selectedShmtModeId = probillData.shipmentMode),
(this.selectedPkgTypeId = probillData.shpmtPackagingTypeId),
setTimeout(() => {
this.shpmntModePkgTypeData.forEach((shpmntModePkgType, i) => {
if (probillData.shipmentMode == shpmntModePkgType.shippingModeId) {
 this.selectedShmtIndexForStep1 = i;
this.selectedShmtDataForStep1 = shpmntModePkgType;
this.selectShmt(
this.selectedShmtIndexForStep1,
this.selectedShmtDataForStep1
);
}
});
}, 1000);

setTimeout(() => {
this.pkgTypes.forEach((pkgType, i) => {
if (probillData.shpmtPackagingTypeId == pkgType.packagingId) {
this.selectedPkgIndexForStep1 = i;
(this.selectedPkgDataForStep1 = pkgType),
(this.availableCreditLimitInCAD =
probillData.availableCreditLimitInCAD),
this.selectPkgType(
this.selectedPkgIndexForStep1,
this.selectedPkgDataForStep1
);
}
});
}, 2000);

const sourceAddress = probillData.sourceAddress;

let shipperObj: any = {

shipperAddrType: sourceAddress ? sourceAddress.addrTypeId : null,
shipperPickupDate: {
year: parseInt(sourceAddress.pickupDate.split("-")[0]),
month: parseInt(sourceAddress.pickupDate.split("-")[1]),
day: parseInt(sourceAddress.pickupDate.split("-")[2]),
},
addressId: sourceAddress.addressId,
shipperPickupFromTime: sourceAddress.fromTime,
shipperPickupToTime: sourceAddress.toTime,
zipCode: sourceAddress.zipCode,
city: sourceAddress.city,
state: sourceAddress.state,
country: sourceAddress.country,
fullAddr: sourceAddress.fullAddr,
addrLine1: sourceAddress.addrLine1,
addrLine2: sourceAddress.addrLine2,
latitude: parseFloat(sourceAddress.latitude),
longitude: parseFloat(sourceAddress.longitude),
extraServices: sourceAddress.extraServices,
company: sourceAddress.company,
companyId: sourceAddress.companyId,
accessorialsData: setTimeout(() => {
this.getAccessrailListToPopulateData(
0,
"start",
sourceAddress.addrTypeId,
sourceAddress.extraServices
);
}, 3000),
selectedAddrGoogleManual:
sourceAddress.googleMapId != "" ? "google" : "manual",
 googleMapId: sourceAddress.googleMapId,
pickupDeliveryInfoId: sourceAddress.pickupDeliveryType,
};

// Patch Shipper Data

if (shipperObj.selectedAddrGoogleManual == "manual") {
this.clickEventShipper(0);
this.checkshipperAddressBook(0);
this.isAddressBookShipper.push(0);
this.shipperToggleBoolean = true;
} else {
// Set latitude and longitude for Google Map
this.shipperMarkers.push({
lat: shipperObj.latitude,
lng: shipperObj.longitude,
label: "1",
index: 0,
});
}

setTimeout(() => {
this.orderDetailForm
.get("shippers")
["controls"][0].patchValue(shipperObj);
}, 1000);

setTimeout(() => {
this.setBusinessType(0, shipperObj.shipperAddrType);
}, 1000);

// setTimeout(() => {
// this.accessorialsData[0] = shipperObj.accessorialsData;
// }, 2000);
// Process destinationAddress (Consignee)
const destinationAddress = probillData.destinationAddress;
let pickupDateArr = destinationAddress.pickupDate.split("-");

let consigneeObj: any = {

consigneeAddrType: destinationAddress.addrTypeId,
consigneePickupDate: {
year: parseInt(pickupDateArr[0]),
month: parseInt(pickupDateArr[1]),
day: parseInt(pickupDateArr[2]),
},
consigneeDeliveryFromTime: destinationAddress.fromTime,
consigneeDeliveryToTime: destinationAddress.toTime,
zipCode: destinationAddress.zipCode,
city: destinationAddress.city,
state: destinationAddress.state,
pickupDeliveryInfoId: destinationAddress.pickupDeliveryType,

country: destinationAddress.country,
fullAddr: destinationAddress.fullAddr,
addrLine1: destinationAddress.addrLine1,
addrLine2: destinationAddress.addrLine2,
latitude: parseFloat(destinationAddress.latitude),
longitude: parseFloat(destinationAddress.longitude),
extraServices: destinationAddress.extraServices,
company: destinationAddress.company,
 companyId: destinationAddress.companyId,
selectedAddrGoogleManual:
destinationAddress.googleMapId != "" ? "google" : "manual",
googleMapId: destinationAddress.googleMapId,
addressId: destinationAddress.addressId,
accessorialsData: setTimeout(() => {
this.getAccessrailListToPopulateData(
0,
"end",
destinationAddress.addrTypeId,
destinationAddress.extraServices
);
}, 3000),
};

// Patch Consignee Data

setTimeout(() => {
this.orderDetailForm
.get("consignees")
["controls"][0].patchValue(consigneeObj);
}, 2000);

let shipmentItems = [];

let shmtItemsLength = probillData.items.length;
probillData.items.sort((a, b) => a.displayOrder - b.displayOrder);
probillData.items.forEach((individualItem, itemIndex) => {
if (individualItem.packaging == null) {
//in the case of courier
individualItem.packaging = individualItem.crsPackageId;
}

if (itemIndex == shmtItemsLength - 1) {
// debugger
setTimeout(() => {
this.pkgTypes.forEach((pkgType, i) => {
if (individualItem.packaging == pkgType.packagingId) {
this.selectedPkgIndexForStep1 = i;
(this.selectedPkgDataForStep1 = pkgType),
this.selectPkgType(
this.selectedPkgIndexForStep1,
this.selectedPkgDataForStep1
);
}
});
}, 3000);
}

let shpmtItem = {
packageName: individualItem.packaging,
quantity: individualItem.qty,
weight: individualItem.totalWeight,
width: individualItem.breadth,
length: individualItem.length,
height: individualItem.height,
description: individualItem.description,
shipmentValue: individualItem.shipmentItemValue,
shipmentValueCurrencyCode: individualItem.shipmentItemValueCurrency,
class: individualItem.freightClass,
nmfc: individualItem.nmfc == null ? "" : individualItem.nmfc,
 stackable: individualItem.stackable,
hazmat: individualItem.hazMat,
hazmatNU:
individualItem.unNumType == null ? "" : individualItem.unNumType,
hazmatUNNumber:
individualItem.unNumber == null ? "" : individualItem.unNumber,
hazmatShipperName:
individualItem.properShippingName == null
? ""
: individualItem.properShippingName,
hazmatHazardClass:
individualItem.hazardClass == null
? ""
: individualItem.hazardClass,
hazmatPackageGroup:
individualItem.packageGroup == null
? ""
: individualItem.packageGroup,
hazmatPackageType:
individualItem.hazardPackagingType == null
? ""
: individualItem.hazardPackagingType,
quoteItemId: individualItem.quoteItemId,
};
shipmentItems.push(shpmtItem);
});

this.setUnitValue(probillData.items[0].lengthType);
setTimeout(() => {
shipmentItems.forEach((shmntItemObj, index) => {
if (index != 0) {
this.addLineShipmentItembyClick();
}
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
packageName: shmntItemObj.packageName,
quantity: shmntItemObj.quantity,
});
this.calculateTotalQuantity("quantity");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
weight: shmntItemObj.weight,
});
this.calculateTotalQuantity("weight");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
width: shmntItemObj.width,
});
this.calculateTotalQuantity("width");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
length: shmntItemObj.length,
});
this.calculateTotalQuantity("length");
this.orderDetailForm
 .get("shipmentItem")
["controls"][index].patchValue({
height: shmntItemObj.height,
});
this.calculateTotalQuantity("height");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
shipmentValue: shmntItemObj.shipmentValue,
});
this.calculateTotalQuantity("shipmentValue");
this.orderDetailForm
.get("shipmentItem")
["controls"][index].patchValue({
description: shmntItemObj.description,
shipmentValueCurrencyCode: shmntItemObj.shipmentValueCurrencyCode,
class: shmntItemObj.class,
nmfc: shmntItemObj.nmfc,
stackable: shmntItemObj.stackable,
hazmat: shmntItemObj.hazmat,
hazmatNU: shmntItemObj.hazmatNU,
hazmatUNNumber: shmntItemObj.hazmatUNNumber,
hazmatShipperName: shmntItemObj.hazmatShipperName,
hazmatHazardClass: shmntItemObj.hazmatHazardClass,
hazmatPackageGroup: shmntItemObj.hazmatPackageGroup,
hazmatPackageType: shmntItemObj.hazmatPackageType,
quoteItemId: shmntItemObj.quoteItemId,
});
});
}, 3500);
setTimeout(() => {

this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
}, 2000);
} else {
this.shpmntModePkgTypeData = probillData.shpmntModePkgTypeData;
this.pkgTypes = probillData.pkgTypes;
this.currentCustomer = probillData.customer;
this.selectedValue = this.selectedCustomerName;
(this.selectedShmtIndexForStep1 = probillData.selectedShmtIndexForStep1),
(this.pkgTypeSelectedArr = probillData.pkgTypeSelectedArr);
this.selectedPkgIndexForStep1 = probillData.selectedPkgIndexForStep1;
(this.availableCreditLimitInCAD = probillData.availableCreditLimitInCAD),
(this.selectedPkgDataForStep1 = probillData.selectedPkgDataForStep1),
(this.pickupDelMode = probillData.pickupDelMode),
(this.availableCreditLimitInUSD =
probillData.availableCreditLimitInUSD),
(this.isCreditDisabled = probillData.isCreditDisabled),
(this.primaryPhone = probillData.primaryPhone),
(this.primaryEmail = probillData.primaryEmail),
(this.billingLocation = probillData.billingData),
(this.selectedShmtModeId = probillData.selectedShmtModeId),
(this.selectedPkgTypeId = probillData.selectedPkgTypeId),
(this.selectedShmtDataForStep1 = probillData.selectedShmtDataForStep1);
this.shmtModeSelectedArr = probillData.shmtModeSelectedArr;
this.orderDetailForm
.get("searchCustomer")
.patchValue(this.selectedCustomerName);
 setTimeout(() => {
this.accessorialsData[0] = [];
this.accessorialsDataCon[0] = [];
(this.accessorialsData[0] = probillData.accessorialShipperData),
(this.accessorialsDataCon[0] = probillData.accessorialConsigneeData);
}, 1000);

this.orderDetailForm.patchValue({
searchCustomer: probillData.orderDetailForm.searchCustomer,
billTo: probillData.orderDetailForm.billTo,

currentProbill: probillData.orderDetailForm.currentProbill,
callersName: probillData.orderDetailForm.callersName,
poNumber: probillData.orderDetailForm.poNumber,
additionalCurrency: probillData.orderDetailForm.additionalCurrency,
});
// this.getAccessrailListToPopulateData(0, 'start',
probillData.orderDetailForm.shippers[0].shipperAddrType,
probillData.orderDetailForm.shippers[0].extraServices),
// this.getAccessrailListToPopulateData(0, 'end',
probillData.orderDetailForm.consignees[0].consigneeAddrType,
probillData.orderDetailForm.consignees[0].extraServices),

this.selectShmt(
this.selectedShmtIndexForStep1,
this.selectedShmtDataForStep1
);
this.selectPkgType(
this.selectedPkgIndexForStep1,
this.selectedPkgDataForStep1,
"",
"change"
);

this.patchArray(
this.orderDetailForm.get("shippers") as FormArray,
probillData.orderDetailForm.shippers
);

this.patchArray(
this.orderDetailForm.get("consignees") as FormArray,
probillData.orderDetailForm.consignees
);
this.patchArray(
this.orderDetailForm.get("shipmentItem") as FormArray,
probillData.orderDetailForm.shipmentItem
);

[
"height",
"length",
"width",
"shipmentValue",
"quantity",
"weight",
].forEach((field) => {
this.calculateTotalQuantity(field);
});
 this.cdr.detectChanges();
}
}

patchArray(formArray: FormArray, data: any[]) {

formArray.clear();
data.forEach((item) => formArray.push(this.formBuilder.group(item)));
}

onproBillChange() {
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.enable();
this.setFromDataOnChangeProBill("update");

this.currentValue = this.orderDetailForm.get("currentProbill").value;
console.log("previousValue", this.previousValue);
console.log("currentValue", this.currentValue);

let probillData = this.getProbillData(this.currentValue);

console.log("probillData", probillData);

if (probillData) {
this.patchFormData(probillData[0]);
}
// console.log(probillData[0], "selectedProbillData")

this.calculateTotalQuantity("height");
this.calculateTotalQuantity("quantity");
this.calculateTotalQuantity("shipmentValue");
}

ngOnChanges(changes: SimpleChanges): void {

// Handle changes in Input values (e.g., currentProbill if it's passed as
Input)
if (changes.currentProbill) {
console.log("CurrentProbill Input changed:", changes.currentProbill);
}
}

getProbillData(probill: string): any {

return this.formDataBaisedonProbill.hasOwnProperty(probill)
? this.formDataBaisedonProbill[probill]
: null;
}

resetFormData() {
this.orderDetailForm = this.formBuilder.group({
searchCustomer: ["", [Validators.required]],

billTo: ["", [Validators.required]],

currentProbill: ["", [Validators.required]],

// callersName: ['', [Validators.required]],

poNumber: ["", [Validators.required]],

shippers: new FormArray([this.createShipper()]),

 consignees: new FormArray([this.createConsignee()]),

shipmentItem: this.formBuilder.array([this.addShipmentItemLine()]),

paymentDetails: this.formBuilder.array([this.addPaymentDetailsLine()]),

baseCharges: [""],

fscAmount: [""],

taxAmount: [""],

totalCharges: [""],

isFrieghtBillAudited: [false],

additionalCurrency: ["CAD"],
});

this.selectedValue = "Search Customer";

this.availableCreditLimitInCAD = 0;

this.availableCreditLimitInUSD = 0;

this.isCreditDisabled = false;

this.primaryContact = "";

this.primaryPhone = "";

this.primaryEmail = "";

this.shpmntModePkgTypeData = [];

this.selectedShmtIndexForStep1 = -1;

this.selectedShmtDataForStep1 = null;

this.selectedPkgTypeId = "";

this.isShmtModeSelected = false;

this.fullTruckLoadSelected = false;

this.totalOfQuantity = 0;

this.shmtModeSelectedArr = [];

this.pkgTypes = [];

this.selectedPkgIndexForStep1 = 0;

this.pkgTypeSelectedArr = [];

this.isPkgTypeSelected = false;

this.accessorialsData = [];
 this.totalOfWeight = 0;

this.totalofShipmentValue = 0;

this.cdr.detectChanges();
}

isFormValid(): boolean {
return true;
//return this.orderDetailForm.valid;
}

setPkgType(selectedPkgData?) {
let itemsLength = this.orderDetailForm.get("shipmentItem").value.length;
let selectedPkgTypeId =
this.orderDetailForm.get("shipmentItem").value[itemsLength - 1]
.packageName;
this.pkgTypes.forEach((pkgType, i) => {
if (selectedPkgTypeId == pkgType.packagingId) {
this.selectPkgType(i, pkgType, true);
}
});
this.calculateOutBoundAndInBoundCharge();
}

markerDragEnd(m: markerInterface, $event: MouseEvent) {}

freightDataArr: any = [];

getfrieghtClass() {
let url = ServerURLS.getFreightClassTypes.action;
this.scHttpService
.getHttpService(url, "")
.then((result: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.freightDataArr = result.freight_info.data;
this.freightClassObj = result["freight_info"]["data"];
this.freightDisplayDataObj = [];
this.defaultHazmat = result["is_hazmat_default"];
if (this.defaultHazmat == true) {
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("hazmat")
.patchValue(this.defaultHazmat);
this.showHideHazmatOptions(0, true);
}
this.freightClassObj.forEach((data, index) => {
this.freightDisplayDataObj[data.freightId] = data;
});
this.displayCourier = false;
})
.catch((error) => {
this.displayCourier = false;
this.router.navigate(["/signin"]);
throw error;
 });
}

customOptionsSelected(data) {
this.getfrieghtClassId(data);
}

getfrieghtClassId(freightRange) {
this.freightClassObj.forEach((data, index) => {
if (
this.freightDisplayDataObj[data.freightId].freightType === freightRange
) {
this.freightClassSelectedId = data.freightId;
}
});
return this.freightClassSelectedId;
}

getfrieghtRangeById(id) {
for (let freightData of this.freightClassObj) {
if (freightData.freightId == id) {
return freightData.freightType;
} else {
return null;
}
}
}

height: any;
weight: any;
width: any;
length: any;
freightClassApplicable = true;
getDensity(index) {
let formFields =
this.orderDetailForm.value.shipmentItem[this.densityCounter];
this.height = formFields.height;
this.weight = formFields.weight;
this.length = formFields.length;
this.width = formFields.width;

if (!this.freightClassApplicable) return;

this.height = parseFloat(this.height);
this.width = parseFloat(this.width);
this.length = parseFloat(this.length);
var weight = this.weight;

if (!this.height && !this.width && !this.length) {

return;
}
if (this.measurementType === "metric") {
//cm to inch
var volume = this.height * this.width * this.length;
weight = this.weight;
} else {
var volume = this.height * this.width * this.length;
}
var density = weight / (volume / 1728);
 this.freightClassCal(density, index);
}

freightClassCal(density, index) {
this.classToSet = [];
if (density >= 30) {
// 60
this.classToSet[index] = this.freightClassObj[2];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 22.5 && density < 30) {
// 65
this.classToSet[index] = this.freightClassObj[3];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 15 && density < 22.5) {
// 70
this.classToSet[index] = this.freightClassObj[4];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 12 && density < 15) {
// 85
this.classToSet[index] = this.freightClassObj[6];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
 return;
}
if (density >= 10 && density < 12) {
// 92.5
this.classToSet[index] = this.freightClassObj[7];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 8 && density < 10) {
// 100
this.classToSet[index] = this.freightClassObj[8];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 6 && density < 8) {
// 125
this.classToSet[index] = this.freightClassObj[10];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 4 && density < 6) {
// 175
this.classToSet[index] = this.freightClassObj[12];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 2 && density < 4) {
 // 250
this.classToSet[index] = this.freightClassObj[14];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density >= 1 && density < 2) {
// 300
this.classToSet[index] = this.freightClassObj[15];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
if (density < 1) {
// 400
this.classToSet[index] = this.freightClassObj[16];
// ((this.orderDetailForm.get('shipmentItem') as
FormArray).at(this.densityCounter) as
FormGroup).get('class').patchValue(this.classToSet[index]['freightType']);
// this.getfrieghtClassId(this.classToSet[index]);
this.orderDetailForm
.get("shipmentItem")
["controls"][index].controls.class.patchValue(
this.classToSet[index]["freightType"]
);
return;
}
}

getLocationType() {
let url = ServerURLS.getLocationTypes.action;
this.scHttpService.getHttpService(url, "").then((result) => {
if (result["data"].length != 0) {
this.locationType = result["data"];
this.businessTypeArray = result["data"] ? result["data"] : [];
this.locationType.filter((element) => {
if (element.isDefault == true) {
this.detailsForm.controls["locationTypeStart"].setValue(
element.locId
);
this.saveQuoteDataObj["sourceAddress"]["addrTypeId"] =
element.locId;
let url =
ServerURLS.getLocationShpmtServcs.action +
"?locTypeId=" +
 element.locId +
"&locType=start";
this.scHttpService.getHttpService(url, "").then((data) => {
this.accessorialData["start"] = data["data"];
this.accesserialLabelStart = "";
this.accessorialData["start"].filter((element) => {
if (element.isDefault == true) {
this.acceserialStart.push(element);
}
});
});
}
});
}
});
}
getPickupList() {
this.commonService.getpickUpList("S").subscribe((result) => {
this.pickUpList = result;
});
this.commonService.getpickUpList("C").subscribe((result) => {
this.pickUpListConsignee = result;
});
}

addPaymentDetailsLine(probll?: string): FormGroup {

this.defaultTaxGroup = this.allTaxList.length
? this.allTaxList.find(
(data) => data.taxPercent == this.globalTaxPercentage
)
: {
taxName: "NO TAX",
taxPercent: 0.0,
};
return this.formBuilder.group({
chargeItem: [
probll ? this.selectedCharge || "" : "",
[Validators.required],
],
probill: [probll ? probll : "", [Validators.required]],
chargeDescription: [{ value: "", disabled: true }, [Validators.required]],
// quantity: ['', [Validators.required]],
quantity: [
"",
[
Validators.required,
Validators.min(1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,20}(?:\.[0-9]{1,2})?$/),
],
],
// price: ['', [Validators.required]],
price: [
"",
[
Validators.required,
Validators.min(0.1),
Validators.max(999999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
 ],
],
ac: [false],
pd: [false],
afs: [false],
fuelType: [""],
fuelCharge: [""],
taxGroup: [
this.defaultTaxGroup.taxName ? this.defaultTaxGroup.taxName : "",
[Validators.required],
],
totalCharge: [{ value: "", disabled: true }],
newLine: [true],
autoChargeItem: [""],
isAutoChargeItem: [false],
});
}

addShipmentItemLine(): FormGroup {
sessionStorage.setItem("_admincountryCurrency", this.setcurrency);
return this.formBuilder.group({
packageName: [null, [Validators.required]],
quantity: [
1,
[
Validators.required,
Validators.min(1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,20}(?:\.[0-9]{1,2})?$/),
],
],
weight: [
"",
[
Validators.required,
Validators.min(0.1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
],
],
width: [
"",
[
Validators.required,
Validators.min(0.1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
],
],
length: [
"",
[
Validators.required,
Validators.min(0.1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
],
],
height: [
 "",
[
Validators.required,
Validators.min(0.1),
Validators.max(99999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
],
],
description: ["", [Validators.required, Validators.maxLength(30)]],
shipmentValue: [
"",
[
Validators.required,
Validators.min(0.1),
Validators.max(9999999999),
Validators.pattern(/^[0-9]{1,11}(?:\.[0-9]{1,2})?$/),
],
],
shipmentValueCurrencyCode: [this.setcurrency],
class: [""],
nmfc: [""],
stackable: [false],
hazmat: [this.defaultHazmat],
hazmatNU: ["UN"],
hazmatUNNumber: [""],
hazmatShipperName: [""],
hazmatHazardClass: [""],
hazmatPackageGroup: [""],
hazmatPackageType: [""],
quoteItemId: [null],
});
}
addLineShipmentItembyClick() {
(<FormArray>this.orderDetailForm.get("shipmentItem")).push(
this.addShipmentItemLine()
);
this.isHazmatChecked.push(false);
}
// addLinePaymentDetailsByClick() {
//
(<FormArray>this.orderDetailForm.get('paymentDetails')).push(this.addPaymentDetails
Line())
// let newlyAddedIndex =
this.orderDetailForm.get('paymentDetails').value.length - 1;
// if
(this.orderDetailForm.get('paymentDetails').value[newlyAddedIndex].chargeItem !=
'') {
// this.setChargeDesctiption(this.selectedCharge, newlyAddedIndex)
// }
// }

get paymentDetailsArray(): FormArray {

return this.orderDetailForm.get("paymentDetails") as FormArray;
}

addLinePaymentDetailsByClick(probill?: string): void {

console.log(this.selectedCharge, "kk");

// Create a new form group with conditional chargeItem

 const newLine = this.addPaymentDetailsLine(probill);
this.paymentDetailsArray.push(newLine);

const newlyAddedIndex = this.paymentDetailsArray.length - 1;

if (
probill &&
this.paymentDetailsArray.at(newlyAddedIndex).get("chargeItem").value !==
""
) {
this.setChargeDesctiption(this.selectedCharge, newlyAddedIndex);
}
}

removeLineShipmentItem(i) {
let tempArr = this.isHazmatChecked.filter((data) => {
return i !== data;
});
this.isHazmatChecked = tempArr;
(<FormArray>this.orderDetailForm.get("shipmentItem")).removeAt(i);
this.setPkgType();
// this.decreamentByOne(i, 'quantity');
// this.decreamentByOne(i, 'weight');
// this.decreamentByOne(i, 'width');
// this.decreamentByOne(i, 'length');
// this.decreamentByOne(i, 'height');
}
removeLinePaymentDetails(i) {
(<FormArray>this.orderDetailForm.get("paymentDetails")).removeAt(i);
this.calculateTotolFuelSurchargeInPaymentDetials();
this.calculateTotalChargeInPayment();
}
checkDestroyReason: string = "normal";
confirmModalOpen() {
this.checkDestroyReason = "goBack";
this.router.navigateByUrl("/shipcarte/orders");
}

getChargeList() {
let url = ServerURLS.getChargeItemListInInvoice.action;
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.chargeList = res;
if (this.chargeList.length > 0) {
for (let chargeObj of this.chargeList) {
if (chargeObj.chargeName == "Freight Rate") {
this.selectedCharge = chargeObj.chargeId;
this.orderDetailForm
.get("paymentDetails")
["controls"][0].patchValue({
chargeItem: this.selectedCharge,
});
this.setChargeDesctiption(this.selectedCharge, 0);
}
}
}
 })
.catch((err: any) => {
// this.toastr.error("Something went wrong!")
});
}
getCustomerListByName(customerName: string) {
this.carrierDetailList = [];
let url1 =
ServerURLS.getCustomerListAdmin.action +
"/0/50?status=Active&query=" +
customerName;
let promsie = this.scHttpService.getHttpService(url1, "");
promsie
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
let customerList = res.response;
// customerList = customerList.filter((data => data.status !== 'INACTIVE'
&& data.status !== 'PENDING'))
this.carrierDetailList.push(customerList);
})
.catch((err: any) => {});
}

getShippingHours() {
let hoursPromise = ServerURLS.getPickupTimes.action;
this.scHttpService.getHttpService(hoursPromise, "").then((res) => {
this.shipingHours = res["data"];
});
}

fetchManualLookUpAddresses() {
let getAddrBookGetQuoteUrl =
ServerURLS.getAddressBookData.action +
"/" +
0 +
"/" +
20 +
"?searchKey=" +
"" +
"&uniqueCompany=" +
true +
"&customerId=" +
this.selectedCustomerId;
this.scHttpService
.getHttpService(getAddrBookGetQuoteUrl, "")
.then((a) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
if (a["totalPages"] === 0) {
this.defaultaddressbookdata = [];
this.displayCourier = false;
return;
}
this.displayCourier = false;
this.defaultaddressbookdata = a["response"];
this.addressData = this.defaultaddressbookdata;
this.ConsigneeAddressData = this.defaultaddressbookdata;
})
 .catch((error) => {
this.displayCourier = false;
if (error["status"] === 404) {
this.displayCourier = false;
return;
}
if (error["status"] === 401) {
localStorage.clear();
this.router.navigate(["/signin"]);
}
});
}
getCustomerDetailsbyId(customerId: string) {
if (customerId) {
this.openModel();
this.selectedCustomerId = customerId;
this.fetchManualLookUpAddresses();
let url = ServerURLS.getCustomerById.action + "?customerId=" + customerId;
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.customerDetailsByid = res;
// let contactData = this.customerDetailsByid.contact_information ?
this.customerDetailsByid.contact_information : [];
this.billingLocation = this.customerDetailsByid.payment_location
? this.customerDetailsByid.payment_location
: [];

this.billingLocation = this.billingLocation.filter(
(data) => data.status != false
);

let billtoData = this.customerDetailsByid.payment_location

? this.customerDetailsByid.payment_location
: [];

this.selectedCustomerName =
this.customerDetailsByid.general_details.customer_name;
this.availableCreditLimitInCAD = parseFloat(
this.customerDetailsByid.general_details.available_credit_limit
).toFixed(2);
this.availableCreditLimitInUSD = parseFloat(
this.customerDetailsByid.general_details.available_credit_limit_usd
).toFixed(2);
this.isCreditDisabled =
this.customerDetailsByid.general_details.is_credit_disabled;
this.selectedValue = this.selectedCustomerName;
if (this.editOrder) {
this.orderDetailForm
.get("searchCustomer")
.patchValue(this.selectedCustomerName);
}
if (this.billingLocation.length > 0) {
for (let element of this.billingLocation) {
if (!this.editOrder && element.is_default_payment_location) {
this.Billto = element.billing_address_id;
this.primaryContact = element.contact_name
 ? element.contact_name
: "--";
this.primaryEmail = element.email_adress
? element.email_adress
: "--";
this.primaryPhone = element.phone_number
? element.phone_number
: "--";
}
}
} else {
this.primaryContact = "--";
this.primaryEmail = "--";
this.primaryPhone = "--";
}

let shpmtArray = [];

this.serviceType = this.customerDetailsByid.services_type
? this.customerDetailsByid.services_type
: [];

this.serviceType.map((elem, index) => {

this.allserviceTypes.map((element, index) => {
if (
elem.services_id === element.shippingModeId &&
element.shippingModeId != "cd99368c-e7ae-11e9-8462-163046d26cd4"
) {
shpmtArray.push(element); // to show only those shipment modes
which are selected by the admin
}
});
});

this.shpmntModePkgTypeData = shpmtArray;
this.customerPackageDate = this.customerDetailsByid.package_type
? this.customerDetailsByid.package_type
: [];

this.orderDetailForm.patchValue({
billTo: this.Billto,
// :this.customerDetailsByid.business_type_id;
});

this.accessorialsData.push(
this.customerDetailsByid.accessorials_type
? this.customerDetailsByid.accessorials_type
: []
);

let shipperExtraServicesArr = [];

for (let accessorialData of this.accessorialsData[0]) {
shipperExtraServicesArr.push(accessorialData.accessorial_id);
}
this.orderDetailForm
.get("shippers")
["controls"][0]["controls"].extraServices.patchValue(
shipperExtraServicesArr
);
 let conExtraServicesArr = [];
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].extraServices.patchValue(
conExtraServicesArr
);

if (this.customerDetailsByid.business_type_id) {
this.getAccessforialList(
0,
"byDefault",
this.customerDetailsByid.business_type_id
);
}

this.orderDetailForm.get("shippers")["controls"][0].patchValue({
shipperAddrType: this.customerDetailsByid.business_type_id
? this.customerDetailsByid.business_type_id
: "",
});
this.closeModel();
})
.catch((err: any) => {
this.closeModel();
this.toastr.error("something went wrong!");
});
}
}
getBussinessAccessrialpackageTypeDetail() {
let url = ServerURLS.getCreateCustomerForm.action;
let promise = this.scHttpService.getHttpService(url, "");
promise.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.BussinessAccessrialpackageTypeDetail = res;
// this.businessTypeArray = res.business_type ? res.business_type : []
});
}
removeRemoveAccessorial(index: any, shipperIndex: any, accessorialId: any) {
this.accessorialsData[shipperIndex].splice(index, 1);

let arr =
this.orderDetailForm.get("shippers")["controls"][shipperIndex]["controls"]
.extraServices.value;
const accessorial = arr.indexOf(accessorialId);
if (accessorial > -1) {
arr.splice(accessorial, 1);
this.orderDetailForm
.get("shippers")
["controls"][shipperIndex]["controls"].extraServices.patchValue(arr);
}
}
removeAccessrialInCon(index: any, conIndex: any, accessorialId: any) {
this.accessorialsDataCon[conIndex].splice(index, 1);

let arr =
this.orderDetailForm.get("consignees")["controls"][conIndex]["controls"]
.extraServices.value;
 const accessorial = arr.indexOf(accessorialId);
if (accessorial > -1) {
arr.splice(accessorial, 1);
this.orderDetailForm
.get("consignees")
["controls"][conIndex]["controls"].extraServices.patchValue(arr);
}
}
selectAccessorialInCon(conIndex: any, serviceObj: any) {
let j = 0;
if (this.accessorialsDataCon[conIndex]) {
for (let i = 0; i < this.accessorialsDataCon[conIndex].length; i++) {
if (
this.accessorialsDataCon[conIndex][i].accessorial_id ===
serviceObj.assocId
) {
j = j + 1;
}
}
if (j <= 0) {
this.accessorialsDataCon[conIndex].push({
accessorial_name: serviceObj.serviceName,
accessorial_id: serviceObj.assocId,
});
}
} else {
this.accessorialsDataCon[conIndex] = [
{
accessorial_name: serviceObj.serviceName,
accessorial_id: serviceObj.assocId,
},
];
}

let conExtraServicesArr = [];

for (let accessorialData of this.accessorialsDataCon[conIndex]) {
conExtraServicesArr.push(accessorialData.accessorial_id);
}
this.orderDetailForm
.get("consignees")
["controls"][conIndex]["controls"].extraServices.patchValue(
conExtraServicesArr
);
}

selectAccessorial(shipperIndex: any, serviceObj: any) {

if (this.accessorialsData.length == 0) {
this.accessorialsData[0] = [];
}
let j = 0;
for (let i = 0; i < this.accessorialsData[shipperIndex].length; i++) {
if (
this.accessorialsData[shipperIndex][i].accessorial_id ===
serviceObj.assocId
) {
j = j + 1;
}
}
if (j <= 0) {
 this.accessorialsData[shipperIndex].push({
accessorial_name: serviceObj.serviceName,
accessorial_id: serviceObj.assocId,
});

let shipperExtraServicesArr = [];

for (let accessorialData of this.accessorialsData[shipperIndex]) {
shipperExtraServicesArr.push(accessorialData.accessorial_id);
}
this.orderDetailForm
.get("shippers")
["controls"][shipperIndex]["controls"].extraServices.patchValue(
shipperExtraServicesArr
);
}
}
setBusinessType(shipperIndex: any, businessId: any) {
this.getAccessforialList(shipperIndex, "byButton", businessId);
}
setBusinessTypeInCon(conIndex: any, businessId: any) {
this.accesserialLabelStart = "Loading Accessorial..";
this.openModel();
let url =
ServerURLS.getAccessorialType.action +
"?locTypeId=" +
businessId +
"&locType=end";
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.accessorailListCon[conIndex] = res.data;
this.accesserialLabelStart = "Select Accessorial";

const filteredData = this.filterAccessorialData(res.data, businessId);

this.accessorialsDataCon[conIndex] = filteredData;
const consigneeControls =
this.orderDetailForm.get("consignees")["controls"][conIndex][
"controls"
];
consigneeControls.extraServices.patchValue([]);

this.closeModel();
})

.catch((err: any) => {

this.closeModel();
// this.toastr.error("Something went wrong!")
});
}

private filterAccessorialData(data: any, businessId: string): any[] {

let selectedBusiness = this.businessTypeArray.find(
(business) => business.locId === businessId
);
console.log(this.shipmentCode, "code", selectedBusiness);
if (
selectedBusiness &&
 selectedBusiness.locTypeCode == "R&H" &&
this.shipmentCode == "LTL"
) {
return data
.filter(
(item: any) =>
item.serviceCode === "CFAPPT" || item.serviceCode === "LFTD"
)
.map((item: any) => ({
accessorial_name: item.serviceName,
accessorial_id: item.serviceId,
hideCloseIcon: true,
}));
} else {
this.accessorialsDataCon = [];
}
return [];
}

setPickUpTime(i, value, fromTo, shipCons) {

if (shipCons == "shipper") {
if (fromTo == "from") {
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].shipperPickupFromTime.patchValue(value);
} else {
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].shipperPickupToTime.patchValue(value);
}
} else {
if (fromTo == "from") {
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].consigneePickupFromTime.patchValue(value);
} else {
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].consigneePickupToTime.patchValue(value);
}
}
this.changeDelivery();
}

getAccessforialList(index: any, action: any, businessId: any) {

this.accesserialLabelStart = "Loading Accessorial..";
this.openModel();
let url1 =
ServerURLS.getAccessorialType.action +
"?locTypeId=" +
businessId +
"&locType=start";
let promise1 = this.scHttpService.getHttpService(url1, "");
promise1
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.accesserialLabelStart = "Select Accessorial";
if (index === 0) {
 this.accessorailList.push(res.data);
} else {
this.accessorailList[index] = res.data;
}
this.accessorialsData[index] = [];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].shipperAddrType.patchValue(
businessId
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].extraServices.patchValue([]);

// if (action === 'byButton') {

// this.orderDetailForm.get('shippers')['controls'][index]
['controls'].shipperAddrType.patchValue(businessId);
// }
// else
if (
action == "byDefault" &&
this.customerDetailsByid.accessorials_type
) {
this.accessorialsData[index] =
this.customerDetailsByid.accessorials_type;
for (let assocData of this.accessorialsData[index]) {
for (let assocListData of this.accessorailList[0]) {
if (assocData.accessorial_id == assocListData.servIceId) {
assocData.accessorial_id = assocListData.assocId;
}
}
}
// for (let serviceData of res.data) {
// if (this.customerDetailsByid.accessorials_type[0].accessorial_id ==
serviceData.servIceId) {
// let shipperExtraServicesArr = [];
// shipperExtraServicesArr.push(serviceData.assocId);
// this.orderDetailForm.get('shippers')['controls'][0]
['controls'].extraServices.patchValue(shipperExtraServicesArr);
// }
// }
let shipperExtraServicesArr = [];

// res.data.map((element,index1)=>{

//
if(this.customerDetailsByid.accessorials_type[index1].accessorial_id===element.serv
IceId){
// shipperExtraServicesArr.push(element.assocId);
// }
// })

// this.customerDetailsByid.accessorials_type.map((element, index1) => {

// let assocID = res.data.filter(data1 => data1.servIceId ==
element.accessorial_id)
// shipperExtraServicesArr.push(assocID[0].assocId)

// })
 for (let assocDefaultData of this.accessorialsData[0]) {
shipperExtraServicesArr.push(assocDefaultData.accessorial_id);
}
this.orderDetailForm
.get("shippers")
["controls"][0]["controls"].extraServices.patchValue(
shipperExtraServicesArr
);
}
this.closeModel();
})
.catch((err: any) => {
this.closeModel();
// this.toastr.error("Something went wrong !", err)
});
}
getAccessrailListToPopulateData(
index: any,
locType: any,
businessId: any,
extraServiceArray: any
) {
this.openModel();
let shipperArray = [];
let consigneeArray = [];
let url =
ServerURLS.getAccessorialType.action +
"?locTypeId=" +
businessId +
"&locType=" +
locType;
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((res: any) => {
console.log(extraServiceArray, "arr", res);

this.displayData = false;
this._loaderService.stringSubject.next(false);
if (locType === "start") {
if (index === 0) {
this.accessorailList.push(res.data);
} else {
this.accessorailList[0] = res.data;
}
this.accessorialsData[0] = [];

extraServiceArray.forEach((element: any) => {

let data = res.data.find((data) => data.assocId === element);
console.log(
this.accessorialsData[0],
"Shipper Accessorials1111",
data
);

if (data) {
this.accessorialsData[0].push({
accessorial_name: data.serviceName,
accessorial_id: data.assocId,
});
 }
});

console.log(this.accessorialsData[0], "Shipper Accessorials");

} else if (locType === "end") {
if (index === 0) {
this.accessorailListCon.push(res.data);
} else {
this.accessorailListCon[0] = res.data;
}
this.accessorialsDataCon[0] = [];

extraServiceArray.forEach((element: any) => {

let data = res.data.find((data) => data.assocId === element);
if (data) {
this.accessorialsDataCon[0].push({
accessorial_name: data.serviceName,
accessorial_id: data.assocId,
});
}
});

console.log(this.accessorialsDataCon[0], "Consignee Accessorials");

}
})
.catch((err: any) => {});

if (locType === "start") {

return shipperArray;
} else if (locType === "end") {
return consigneeArray;
}

console.log(this.accessorialsDataCon[0], "Consignee Accessorials1");

console.log(this.accessorialsData[0], "Shipper Accessorials1");
}
selectBillTo(billingId: any) {
this.orderDetailForm.get("billTo").patchValue(billingId);
for (let i = 0; i < this.billingLocation.length; i++) {
if (this.billingLocation[i].billing_address_id === billingId) {
this.primaryContact = this.billingLocation[i].contact_name;
this.primaryEmail = this.billingLocation[i].email_adress;
this.primaryPhone = this.billingLocation[i].phone_number;
}
}
}

getAllServiceMapPackageType() {
let fetchCustomerCreditDataUrl = `$
{ServerURLS.getAllServiceMapPackageType.action}`;
let promise = this.scHttpService.getHttpService(
fetchCustomerCreditDataUrl,
""
);
promise
.then((res: any) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.allserviceTypes = res;
 if (this.shipAgainQuoteID !== null) {
// this.getQuoteDetailsById(this.shipAgainQuoteID);
}
})
.catch((err) => {
this.modalService.dismissAll();
this.toastr.error(
`${
err.message
? err.message
: err.Message
? err.Message
: "Something Went Wrong"
}`
);
});
}

selectShmt(index, shmtData) {
console.log(index, shmtData, "skksks");

this.selectedShmtIndexForStep1 = index;
this.selectedShmtDataForStep1 = shmtData;
this.selectedPkgTypeId = "";
this.isShmtModeSelected = true;
this.shmtModeSelectedArr = [];
this.pkgTypes = [];
this.pkgTypeSelectedArr = [];
this.isPkgTypeSelected = false;
this.freightClassApplicable =
this.shpmntModePkgTypeData[index].isFreightNeeded;

if (!this.shmtModeSelectedArr.includes(index)) {
this.shmtModeSelectedArr.push(index);
}
//out bound and in bound charge is only applicable when shipment mode is LTL
if (shmtData.shippingModeId == "cd6bdba2-e7ae-11e9-8462-163046d26cd4") {
this.isOutBoundInBoundApplicable = true;
} else {
this.isOutBoundInBoundApplicable = false;
}
this.selectedShmtMode = shmtData.shippingMode;
this.shipmentCode = shmtData.shipmentCode;
this.filterAccessorialData("", "");

this.selectedShmtModeId = shmtData.shippingModeId;
if (shmtData.shippingModeId == "cd6bdba2-e7ae-11e9-8462-163046d26cd4") {
this.isOutBoundInBoundApplicable = true;
}
// else {
// this.isOutBoundInBoundApplicable = false;
// this.outBoundInBoundChargeArray = []
// }
if (
shmtData.shippingModeId == "0a13d82b-f7ee-11e9-8462-163046d26cd4" ||
shmtData.shippingModeId == "cd99368c-e7ae-11e9-8462-163046d26cd4"
) {
// if it's Courier or FTL shipment mode
if (shmtData.shippingModeId == "0a13d82b-f7ee-11e9-8462-163046d26cd4") {
 this.shmtModeCourier = true;
} else {
this.shmtModeCourier = false;
}
if (shmtData.shippingModeId == "cd99368c-e7ae-11e9-8462-163046d26cd4") {
this.fullTruckLoadSelected = true;
} else {
this.fullTruckLoadSelected = false;
}
let carrierIds = [];
for (let pkgType of shmtData.packagingDetails) {
if (pkgType.packagingType != "Custom Package") {
this.customerPackageDate.map((element, index) => {
if (element.service_id === shmtData.shippingModeId) {
if (!carrierIds.includes(element.package_id)) {
carrierIds.push(element.package_id);
}
}
});
}
}
for (let pkgType of shmtData.packagingDetails) {
if (pkgType.packagingType != "Custom Package") {
for (let i = 0; i < carrierIds.length; i++) {
if (carrierIds.includes(pkgType.packagingId)) {
this.pkgTypes.push(pkgType);
break;
}
}
}
}
} else {
//LTL and VLTL shpmt mode
let carrierIds = [];
this.shmtModeCourier = false;
this.fullTruckLoadSelected = false;
if (shmtData.packagingTypeDetails != null) {
for (let pkgType of shmtData.packagingTypeDetails) {
if (pkgType.packagingName != "Custom Package") {
if (!carrierIds.includes(pkgType.packagingId)) {
carrierIds.push(pkgType.packagingId);
}
}
}

for (let pkgType of shmtData.packagingTypeDetails) {

if (pkgType.packagingName != "Custom Package") {
for (let i = 0; i < carrierIds.length; i++) {
if (carrierIds.includes(pkgType.packagingId)) {
this.pkgTypes.push(pkgType);
break;
}
}
}
}
} else if (shmtData.packagingTypeDetails == null) {
this.isShmtModeSelected = false;
this.pkgTypes = [];
}
 }

for (let packageNameOfShipmentItem of this.orderDetailForm.get(

"shipmentItem"
)["controls"]) {
if (!localStorage.getItem("_adminstep1Data")) {
packageNameOfShipmentItem.get("packageName").patchValue(""); //set blank
packageName to all shipment items if shipment mode has changed
}
}
// this.setPackageList(this.pkgTypes, shmtData);
}
setPackageList(packageList: any, ship: any) {
this.packageListInShipment = [];
if (ship.description === "Courier") {
packageList.forEach((element) => {
this.packageListInShipment.push({
packageName: element.packagingType,
packageId: element.packagingId,
});
});
} else {
packageList.forEach((element) => {
this.packageListInShipment.push({
packageName: element.packagingName,
packageId: element.packagingId,
});
});
}
}
onSelectedPackage(value, i) {}
selectPkgType(index, pkgTypeData, changeFromItems?: any, data?: string) {
this.selectedPkgIndexForStep1 = index;
this.selectedPkgDataForStep1 = pkgTypeData;
this.isPkgTypeSelected = true;
this.pkgTypeSelectedArr = [];
if (!this.pkgTypeSelectedArr.includes(index)) {
this.pkgTypeSelectedArr.push(index);
}
if (this.shmtModeCourier || this.fullTruckLoadSelected) {
// set pkgtypeid only when courier or FTL
this.selectedPkgTypeId = pkgTypeData.packagingId;
this.selectedPkgStyleCode = pkgTypeData.styleCode;
} else {
// set pkgtypeid only for LTL or VLTL
this.selectedPkgTypeId = "6963113f-0fa7-11ea-8462-163046d26cd4";
this.selectedPkgStyleCode = pkgTypeData.packagingCode;
}
if (!changeFromItems || changeFromItems == null) {
let shipmentItemsLength =
this.orderDetailForm.get("shipmentItem").value.length;
this.orderDetailForm
.get("shipmentItem")
["controls"][shipmentItemsLength - 1][
"controls"
].packageName.patchValue(pkgTypeData.packagingId);
}
if (!data) {
this.calculateOutBoundAndInBoundCharge();
 }
}

clickEventShipper(i) {
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][i] = "";
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].fullAddr.patchValue("");
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].country.patchValue("");
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].state.patchValue("");
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].city.patchValue("");
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].zipCode.patchValue("");
this.orderDetailForm
.get("shippers")
["controls"][i]["controls"].googleMapId.patchValue("");
this.shipperMarkers.splice(i, 1);
// this.isAddressBookShipper = !this.isAddressBookShipper;
if (this.isAddressBookShipper.includes(i)) {
let newArr = this.isAddressBookShipper.filter((m) => {
return m !== i;
});
this.isAddressBookShipper = newArr;
} else {
if (!this.editOrder) {
if (
this.orderDetailForm.get("searchCustomer").value == "" &&
this.orderDetailForm.get("billTo").value == ""
) {
this.toastr.error("Please select customer.", "", {
timeOut: 10000,
});
}
}
this.isAddressBookShipper.push(i);
}
}
clickEventConsignee(i) {
this.saveQuoteDataObj["destinationAddress"]["fullAddr"][i] = "";
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].fullAddr.patchValue("");
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].country.patchValue("");
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].state.patchValue("");
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].city.patchValue("");
this.orderDetailForm
 .get("consignees")
["controls"][i]["controls"].zipCode.patchValue("");
this.orderDetailForm
.get("consignees")
["controls"][i]["controls"].googleMapId.patchValue("");
this.consigneeMarkers.splice(i, 1);
// this.isAddressBookConsignee = !this.isAddressBookConsignee;
if (this.isAddressBookConsignee.includes(i)) {
let newArr = this.isAddressBookConsignee.filter((m) => {
return m !== i;
});
this.isAddressBookConsignee = newArr;
} else {
if (!this.editOrder) {
if (
this.orderDetailForm.get("searchCustomer").value == "" &&
this.orderDetailForm.get("billTo").value == ""
) {
this.toastr.error("Please select customer.", "", {
timeOut: 10000,
});
}
}
this.isAddressBookConsignee.push(i);
}
}

checkshipperAddressBook(i) {
// this.shearchaddress = this.detailsForm.controls['shipperAddressBook'].value;
if (this.shearchaddress.includes(i)) {
let newArr = this.shearchaddress.filter((m) => {
return m !== i;
});
this.shearchaddress = newArr;
} else {
this.shearchaddress.push(i);
}
this.showDetailedAddressError = false;
this.showShipperWarning = false;
// this.saveQuoteDataObj['shipperCompanyId'] = null;
// this.saveQuoteDataObj['sourceAddress']['fullAddr'] = {};
// this.saveQuoteDataObj['sourceAddress']['addrLine1'] = '';
// this.saveQuoteDataObj['sourceAddress']['addrLine2'] = '';
// this.saveQuoteDataObj['sourceAddress']['city'] = '';
// this.saveQuoteDataObj['sourceAddress']['country'] = '';
this.countryShipperString = "";
// this.saveQuoteDataObj['sourceAddress']['state'] = '';
// this.saveQuoteDataObj['sourceAddress']['company'] = '';
// this.saveQuoteDataObj['sourceAddress']['zipCode'] = '';
// this.saveQuoteDataObj['sourceAddress']['latitude'] = '';
// this.saveQuoteDataObj['sourceAddress']['longitude'] = '';
this.detailsForm.controls["locationTypeStart"].setValue("");
this.detailsForm.controls["shipperAddress"].reset();
this.acceserialStart = [];
}

checkConsigneeAddressBook(i) {
// this.shearchaddress2 =
this.detailsForm.controls['consigneeAddressBook'].value;
 if (this.shearchaddress2.includes(i)) {
let newArr = this.shearchaddress2.filter((m) => {
return m !== i;
});
this.shearchaddress2 = newArr;
} else {
this.shearchaddress2.push(i);
}
this.showDetailedEndAddressError = false;
this.showConsigneeWarning = false;
// this.saveQuoteDataObj['destinationAddress']['fullAddr'] = {};
// this.saveQuoteDataObj['destinationAddress']['addrLine1'] = '';
// this.saveQuoteDataObj['destinationAddress']['addrLine2'] = '';
// this.saveQuoteDataObj['destinationAddress']['city'] = '';
// this.saveQuoteDataObj['destinationAddress']['state'] = '';
// this.saveQuoteDataObj['destinationAddress']['country'] = '';
this.countryConsigneeString = "";
// this.saveQuoteDataObj['destinationAddress']['company'] = '';
// this.saveQuoteDataObj['destinationAddress']['zipCode'] = '';
// this.saveQuoteDataObj['destinationAddress']['latitude'] = '';
// this.saveQuoteDataObj['destinationAddress']['longitude'] = '';
this.detailsForm.controls["locationTypeEnd"].setValue("");
this.detailsForm.controls["consigneeAddress"].reset();
this.acceserialEnd = [];
}

createShipper(): FormGroup {
let extraServicesArr = [];

return this.formBuilder.group({
shipperAddressBook: [""],
shipperAddress: [""],
shipperAddrType: [
"5e83a8cb-df9a-11e9-b6b0-f07959651ad4",
[Validators.required],
],
shipperPickupDate: ["", [Validators.required]],
shipperPickupFromTime: ["c7b3e35a-f7ed-11e9-8462-163046d26cd4"],
shipperPickupToTime: ["c7b3e641-f7ed-11e9-8462-163046d26cd4"],
pickupDeliveryInfoId: ["", [Validators.required]],
zipCode: [null],
city: [null],
state: [null],
country: [null],
fullAddr: ["", [Validators.required]],
addrLine1: [""],
addrLine2: [""],
latitude: [""],
longitude: [""],
addrTypeId: [""],
extraServices: [extraServicesArr],
company: [""],

pickupDate: [""],
fromTime: [""],
toTime: [""],
companyId: [""],
googleMapId: [""],
addressId: [null],
 });
}
onAddMoreShipper(newIndex) {
this.currentShipperCount = newIndex;
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][newIndex] = "";
this.shippers = this.orderDetailForm.get("shippers") as FormArray;
this.shippers.push(this.createShipper());
}

createConsignee(): FormGroup {
let extraServicesArr = [];
return this.formBuilder.group({
consigneeAddressBook: [""],
consigneeAddress: [""],
consigneeAddrType: [
"5e83a8cb-df9a-11e9-b6b0-f07959651ad4",
[Validators.required],
],
consigneePickupDate: ["", [Validators.required]],
consigneePickupFromTime: ["c7b3e35a-f7ed-11e9-8462-163046d26cd4"],
consigneePickupToTime: ["c7b3e641-f7ed-11e9-8462-163046d26cd4"],
pickupDeliveryInfoId: ["", [Validators.required]],
zipCode: [null],
city: [null],
state: [null],
country: [null],
fullAddr: ["", [Validators.required]],
addrLine1: [""],
addrLine2: [""],
latitude: [""],
longitude: [""],
addrTypeId: [null],
extraServices: [extraServicesArr],
company: [""],

pickupDate: [""],
fromTime: [""],
toTime: [""],
companyId: [""],
googleMapId: [""],
addressId: [null],
});
}
onAddMoreConsignee(newIndex) {
this.currentConsigneeCount = newIndex;
this.saveQuoteDataObj["destinationAddress"]["fullAddr"][newIndex] = "";
this.consignees = this.orderDetailForm.get("consignees") as FormArray;
this.consignees.push(this.createConsignee());
}

showHideHazmatOptions(i, ele) {
if (ele) {
this.isHazmatChecked[i] = true;
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageGroup.setValidators([Validators.required]);
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageType.setValidators([Validators.required]);
 } else {
this.isHazmatChecked[i] = false;
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageGroup.setValidators(null);
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageGroup.updateValueAndValidity();
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageType.setValidators(null);
this.orderDetailForm.controls.shipmentItem["controls"][
i
].controls.hazmatPackageType.updateValueAndValidity();
}
}

// renderOptions = {
// suppressMarkers: true,
// }
shipperMarkers: markerInterface[] = [];
handleAddressChange(e, index) {
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][index] = "";
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine2.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].fullAddr.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].country.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].state.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].city.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].zipCode.patchValue(null);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].googleMapId.patchValue(null);

this.showDetailedAddressError = false;
this.showShipperWarning = false;
this.address_components = e.address_components;
this.postalValid = false;
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][index] =
e.formatted_address;
this.getzipcodestart(
e.formatted_address,
e.address_components,
e.geometry.location,
"start",
 index, // shipper index
e.name, // company name
e.place_id
);
e.address_components["place_id"] = e.place_id;
this.callcurrency(e.address_components, "shipper");
this.geometry = e.geometry.location;
var latitude = e.geometry.location.lat();
var longitude = e.geometry.location.lng();
this.origin = { lat: latitude, lng: longitude };
// if (!this.latlng.length) {
// this.latlng.push([latitude, longitude]);
// } else {
// this.latlng[0] = [latitude, longitude];
// }
if (index == 0 || index == "0") {
this.latlng = [];
this.destination = { lat: latitude, lng: longitude };
}
// if(this.latlng[index])
this.latlng.push([latitude, longitude, "shipper"]);
if (this.shipperMarkers.length == 0) {
this.shipperMarkers.push({
lat: latitude,
lng: longitude,
label: (index + 1).toString(),
index: index,
});
} else {
if (this.shipperMarkers[index]) {
this.shipperMarkers[index].lat = latitude;
this.shipperMarkers[index].lng = longitude;
} else {
this.shipperMarkers.push({
lat: latitude,
lng: longitude,
label: (index + 1).toString(),
index: index,
});
}
}

//Get Business Name

this.getResultFromMapService(
{ placeId: e.place_id, fields: ["name", "business_status"] },
"start"
);

this.handlePalletInOutBound();
}

handlePalletInOutBound() {
let shipperAddressArray = this.orderDetailForm.get("shippers").value;
let consigneeAddressArray = this.orderDetailForm.get("consignees").value;
let shipperOutBoundApplied = false;
let consigneeOutBoundApplied = false;

// Check for shipper outbound condition

shipperAddressArray.forEach((element) => {
 if (
element.fullAddr.replace(/ /g, "") ===
"1033JaysonCt,Mississauga,ONL4W2P4,Canada" ||
element.fullAddr.replace(/ /g, "") ===
"1033JaysonCt,Mississauga,ONL4W2P4,CA"
) {
shipperOutBoundApplied = true;
}
});

// Check for consignee outbound condition

consigneeAddressArray.forEach((element) => {
if (
element.fullAddr.replace(/ /g, "") ===
"1033JaysonCt,Mississauga,ONL4W2P4,Canada" ||
element.fullAddr.replace(/ /g, "") ===
"1033JaysonCt,Mississauga,ONL4W2P4,CA"
) {
consigneeOutBoundApplied = true;
}
});

if (!shipperOutBoundApplied && !consigneeOutBoundApplied) {

const currentProbill = this.orderDetailForm.get("currentProbill").value;
this.outBoundInBoundChargeArray = this.outBoundInBoundChargeArray.filter(
(item) => item.probill !== currentProbill
);
}

this.handleInOutBoundQty();
// console.log(this.orderDetailForm.get('currentProbill').value,
this.outBoundInBoundChargeArray, shipperOutBoundApplied, consigneeOutBoundApplied);
}

handleInOutBoundQty() {
let totalPalletCount = 0;
let totalBoxCount = 0;
let shipmentItems = this.orderDetailForm.get("shipmentItem").value;
shipmentItems.forEach((element, index) => {
if (element.packageName == "b8e221f4-f312-11e9-8462-163046d26cd4") {
totalPalletCount = totalPalletCount + element.quantity;
}
if (element.packageName == "b8e223fe-f312-11e9-8462-163046d26cd4") {
totalBoxCount = totalBoxCount + element.quantity;
}
});

const currentProbill = this.orderDetailForm.get("currentProbill").value;

this.outBoundInBoundChargeArray.forEach((item) => {
if (item.probill === currentProbill) {
if (item.chargeName == "Pallet Outbound Fee") {
item.quantity = totalPalletCount;
} else if (item.chargeName == "Pallet Inbound Fee") {
item.quantity = totalPalletCount;
} else {
if (item.chargeName == "Box Inbound Fee") {
item.quantity = totalBoxCount;
} else {
item.quantity = totalBoxCount;
 }
}
}
});
}

consigneeMarkers: markerInterface[] = [];

handleConsignee(e, index) {
this.saveQuoteDataObj["destinationAddress"]["fullAddr"][index] = "";
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine2.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].fullAddr.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].country.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].state.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].city.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].zipCode.patchValue(null);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].googleMapId.patchValue(null);

this.showDetailedEndAddressError = false;
this.showConsigneeWarning = false;

this.saveQuoteDataObj["destinationAddress"]["fullAddr"][index] =
e.formatted_address;
this.getzipcodestart(
e.formatted_address,
e.address_components,
e.geometry.location,
"end",
index,
e.name,
e.place_id
);
this.callcurrency(e.address_components, "consignee");

var latitude = e.geometry.location.lat();

var longitude = e.geometry.location.lng();
this.destination = { lat: latitude, lng: longitude };

// if (!this.latlng.length) {
// this.latlng[0] = [];
// this.latlng[1] = [latitude, longitude];
// }
// else if (this.latlng.length >= 1) {
 // this.latlng[1] = [latitude, longitude];
// }
this.latlng.push([latitude, longitude, "consignee"]);
if (this.consigneeMarkers.length == 0) {
this.consigneeMarkers.push({
lat: latitude,
lng: longitude,
label: (index + 1).toString(),
index: index,
});
} else {
if (this.consigneeMarkers[index]) {
this.consigneeMarkers[index].lat = latitude;
this.consigneeMarkers[index].lng = longitude;
} else {
this.consigneeMarkers.push({
lat: latitude,
lng: longitude,
label: (index + 1).toString(),
index: index,
});
}
}

this.handlePalletInOutBound();

//Get Business Name

this.getResultFromMapService(
{ placeId: e.place_id, fields: ["name", "business_status"] },
"end"
);
}

callcurrency(address, action) {
for (let key in address) {
for (let endkey in address[key]) {
for (let mainkey in address[key][endkey]) {
if (address[key][endkey].includes("country") == true) {
if (action == "shipper") {
this.countryShipperString = address[key]["short_name"];
} else {
this.countryConsigneeString = address[key]["short_name"];
}
}
}
}
}
this.displayCurrency();
this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
this.calculateOutBoundAndInBoundCharge();
}
globalTaxPercentage: any = 0;
shipperOutBoundApplied: boolean = false;
consigneeInBoundApplied: boolean = false;
isOutBoundInBoundApplicable: boolean = false;
totalAmountOfOutBountAndInBound: any = 0;
palletInBountOutTax: any = 0;
calculateOutBoundAndInBoundCharge() {
this.shipperOutBoundApplied = false;
 this.consigneeInBoundApplied = false;
// this.outBoundInBoundChargeArray = []
let shipperAddressArray = this.orderDetailForm.get("shippers").value;
let consigneeAddressArray = this.orderDetailForm.get("consignees").value;
shipperAddressArray.forEach((element, index) => {
if (
element.fullAddr.replace(/ /g, "") ==
"1033JaysonCt,Mississauga,ONL4W2P4,Canada" ||
element.fullAddr.replace(/ /g, "") ==
"1033JaysonCt,Mississauga,ONL4W2P4,CA"
) {
//shipper array contains the shipcarte address
this.shipperOutBoundApplied = true;
}
});
consigneeAddressArray.forEach((element, index) => {
if (
element.fullAddr.replace(/ /g, "") ==
"1033JaysonCt,Mississauga,ONL4W2P4,Canada" ||
element.fullAddr.replace(/ /g, "") ==
"1033JaysonCt,Mississauga,ONL4W2P4,CA"
) {
//consignee array contains the shipcarte address
this.consigneeInBoundApplied = true;
}
});
this.appendElementInOutBoundArray();
if (this.shipperOutBoundApplied || this.consigneeInBoundApplied) {
this.calculatePalletInBountOutBOundTax();
}
}
calculatePalletInBountOutBOundTax() {
let totalCharge = 0;
this.outBoundInBoundChargeArray.forEach((element, index) => {
if (
element.chargeName.includes("Outbound") ||
element.chargeName.includes("Inbound")
) {
totalCharge = totalCharge + element.quantity * element.price;
}
});

this.palletInBountOutTax = ((totalCharge * 13) / 100).toFixed(2);

}
appendElementInOutBoundArray() {
//b8e221f4-f312-11e9-8462-163046d26cd4 pallet id
//b8e223fe-f312-11e9-8462-163046d26cd4 boxed id
// let obj={
// chargeName:'',
// quantity:0,
// price:0,
// }
let shipmentItemArray = this.orderDetailForm.get("shipmentItem").value;
shipmentItemArray.forEach((element, index) => {
let itemsListFirst = this.outBoundInBoundChargeArray.filter(
(data) =>
data.chargeName == "Pallet Outbound Fee" &&
data.probill == this.orderDetailForm.get("currentProbill").value
);
 if (itemsListFirst.length <= 0) {
if (
element.packageName == "b8e221f4-f312-11e9-8462-163046d26cd4" &&
this.shipperOutBoundApplied
) {
let obj = {
chargeName: "Pallet Outbound Fee",
quantity: element.quantity ? element.quantity : 1,
price: 7.5,
probill: this.orderDetailForm.get("currentProbill").value,
};
this.outBoundInBoundChargeArray.push(obj);
}
}

let itemsListSecond = this.outBoundInBoundChargeArray.filter(

(data) =>
data.chargeName == "Box Outbound Fee" &&
data.probill == this.orderDetailForm.get("currentProbill").value
);
if (itemsListSecond.length <= 0) {
if (
element.packageName == "b8e223fe-f312-11e9-8462-163046d26cd4" &&
this.shipperOutBoundApplied
) {
let obj = {
chargeName: "Box Outbound Fee",
quantity: element.quantity ? element.quantity : 1,
price: 1.5,
probill: this.orderDetailForm.get("currentProbill").value,
};
this.outBoundInBoundChargeArray.push(obj);
}
}

// Check if 'Pallet Inbound Fee' for the current probill is already in the
array
let itemsListThird = this.outBoundInBoundChargeArray.filter(
(data) =>
data.chargeName == "Pallet Inbound Fee" &&
data.probill == this.orderDetailForm.get("currentProbill").value
);
if (itemsListThird.length <= 0) {
if (
element.packageName == "b8e221f4-f312-11e9-8462-163046d26cd4" &&
this.consigneeInBoundApplied
) {
let obj = {
chargeName: "Pallet Inbound Fee",
quantity: element.quantity ? element.quantity : 1,
price: 7.5,
probill: this.orderDetailForm.get("currentProbill").value,
};
this.outBoundInBoundChargeArray.push(obj);
}
}

// Check if 'Box Inbound Fee' for the current probill is already in the array
let itemsListFourth = this.outBoundInBoundChargeArray.filter(
 (data) =>
data.chargeName == "Box Inbound Fee" &&
data.probill == this.orderDetailForm.get("currentProbill").value
);
if (itemsListFourth.length <= 0) {
if (
element.packageName == "b8e223fe-f312-11e9-8462-163046d26cd4" &&
this.consigneeInBoundApplied
) {
let obj = {
chargeName: "Box Inbound Fee",
quantity: element.quantity ? element.quantity : 1,
price: 1.5,
probill: this.orderDetailForm.get("currentProbill").value,
};
this.outBoundInBoundChargeArray.push(obj);
}
}
});

this.calculateTotalOutBoundInBoutnCharge();
}
callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress() {
let shipperAddressArray = this.orderDetailForm.get("shippers").value;
let consigneeAddressArray = this.orderDetailForm.get("consignees").value;

if (
shipperAddressArray[0].country &&
shipperAddressArray[0].state &&
consigneeAddressArray[consigneeAddressArray.length - 1].country &&
consigneeAddressArray[consigneeAddressArray.length - 1].state
) {
// will send the first index shipper country code and last index consignee
country code
let url =
ServerURLS.getTaxPercentage.action +
"?destState=" +
consigneeAddressArray[consigneeAddressArray.length - 1].state +
"&destCountry=" +
consigneeAddressArray[consigneeAddressArray.length - 1].country +
"&sourceState=" +
shipperAddressArray[0].state +
"&sourceCountry=" +
shipperAddressArray[0].country;
let promise = this.scHttpService.getHttpService(url, "");
promise
.then((res: any) => {
this.globalTaxPercentage = res.tax;
// if ( this.orderDetailForm.get('paymentDetails')['controls']
[0].controls.taxGroup.value!=this.globalTaxPercentage &&
this.orderDetailForm.get('paymentDetails')['controls'][0].controls.chargeItem.value
=='') {
// this.orderDetailForm.get('paymentDetails')['controls']
[0].patchValue({
// taxGroup: this.globalTaxPercentage==5?'GST
5':this.globalTaxPercentage==13?'HST 13':this.globalTaxPercentage==15?'HST 15':'NO
TAX'
// })
// }
 setTimeout(() => {
if (!this.taxUpdate) {
this.orderDetailForm
.get("paymentDetails")
["controls"][0].patchValue({
taxGroup:
this.globalTaxPercentage == 5
? "GST 5"
: this.globalTaxPercentage == 13
? "HST 13"
: this.globalTaxPercentage == 15
? "HST 15"
: "NO TAX",
});
this.taxUpdate = true;
}
}, 1500);
this.calculateTotalChargeInPayment();
})
.catch((err: any) => {
this.globalTaxPercentage = 0;
this.calculateTotalChargeInPayment();
});
} else {
this.globalTaxPercentage = 0;
this.calculateTotalChargeInPayment();
}
}
callCurrencyManualAddr(country, action) {
if (action == "shipper") {
this.countryShipperString = country;
} else {
this.countryConsigneeString = country;
}
this.displayCurrency();
}

displayCurrency() {
if (
this.countryShipperString === "CA" &&
this.countryConsigneeString === "CA"
) {
this.setcurrency = "CAD";
} else if (
this.countryShipperString === "US" &&
this.countryConsigneeString === "CA"
) {
this.setcurrency = "USD";
} else if (
this.countryShipperString === "CA" &&
this.countryConsigneeString === "US"
) {
this.setcurrency = "USD";
} else if (
this.countryShipperString === "US" &&
this.countryConsigneeString === "US"
) {
this.setcurrency = "USD";
} else {
 this.setcurrency = "CAD";
}
sessionStorage.setItem("_admincountryCurrency", this.setcurrency);
// this.currencies = [];
// this.currencies.push({ countryCurrency: this.setcurrency == 'CAD' ? 'CAD' :
'USD', countryCode: this.setcurrency == 'CAD' ? 'CA' : 'US' })
this.orderDetailForm.get("additionalCurrency").patchValue(this.setcurrency);
this.calculateTotalChargeInPayment();
}

getResultFromMapService(request, detailsFor) {
var self = this;
this.mapService.getDetails(request, function (result, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
if (result.business_status) {
if (detailsFor == "start") {
self.saveQuoteDataObj["sourceAddress"]["company"] = result.name;
} else {
self.saveQuoteDataObj["destinationAddress"]["company"] =
result.name;
}
} else {
if (detailsFor == "start") {
self.saveQuoteDataObj["sourceAddress"]["company"] = null;
} else {
self.saveQuoteDataObj["destinationAddress"]["company"] = null;
}
}
}
});
}

selectShipperAddress(e) {
this.found = "";
if (e.length > 2) {
this.found = "searching...";
this.addressData = [];
let getAddrBookGetQuoteUrl =
ServerURLS.getAddressBookData.action +
"/" +
0 +
"/" +
10 +
"?searchKey=" +
e +
"&uniqueCompany=" +
true +
"&customerId=" +
this.selectedCustomerId;
this.scHttpService
.getHttpService(getAddrBookGetQuoteUrl, "")
.then((a) => {
if (a["totalPages"] === 0) {
this.addressData = [];
this.found = "No data found.";
this.displayCourier = false;
return;
}
this.displayCourier = false;
 this.addressData = a["response"];
this.found = "";
})
.catch((error) => {
this.displayCourier = false;
if (error["status"] === 404) {
this.found = "No data found.";
this.displayCourier = false;
return;
}
if (error["status"] === 401) {
localStorage.clear();
this.router.navigate(["/signin"]);
}
});
}
if (e.length <= 2) {
this.found = "";
this.addressData = this.defaultaddressbookdata;
}
}

selectConsigneeAddress(e) {
this.found2 = "";
if (e.length > 2) {
this.found2 = "searching...";
this.ConsigneeAddressData = [];
let getAddrBookGetQuoteUrl =
ServerURLS.getAddressBookData.action +
0 +
"/" +
10 +
"?searchKey=" +
e +
"&uniqueCompany=" +
true +
"&customerId=" +
this.selectedCustomerId;
this.scHttpService
.getHttpService(getAddrBookGetQuoteUrl, "")
.then((a) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
if (a["totalPages"] === 0) {
this.ConsigneeAddressData = [];
this.displayCourier = false;
this.found2 = "No data found.";
return;
}
this.ConsigneeAddressData = a["response"];
this.found2 = "";
})
.catch((error) => {
this.displayCourier = false;
if (error["status"] === 404) {
this.found2 = "No data found.";
this.displayCourier = false;
return;
}
 if (error["status"] === 401) {
localStorage.clear();
this.router.navigate(["/signin"]);
}
});
}
if (e.length <= 2) {
this.found2 = "";
this.ConsigneeAddressData = this.defaultaddressbookdata;
}
}

getCompanyDetails(index, companyId, flag) {

this.displayCourier = true;
let getAddressBookByIdUrl =
ServerURLS.getAddressBookById.action + "?companyId=" + companyId;
this.scHttpService
.getHttpService(getAddressBookByIdUrl, "")
.then((res) => {
this.detailsOfCompany = res;
if (flag == "start") {
this.saveQuoteDataObj["sourceAddress"]["fullAddr"][index] =
this.detailsOfCompany.companyDetails.fullAddress;
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].latitude.patchValue(
this.detailsOfCompany.companyDetails.latitude != ""
? parseFloat(this.detailsOfCompany.companyDetails.latitude)
: ""
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].longitude.patchValue(
this.detailsOfCompany.companyDetails.longitude != ""
? parseFloat(this.detailsOfCompany.companyDetails.longitude)
: ""
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].fullAddr.patchValue(
this.detailsOfCompany.companyDetails.fullAddress
);
// this.orderDetailForm.get('shippers')['controls'][index]
['controls'].hopIndex.patchValue(index);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].company.patchValue(
this.detailsOfCompany.companyDetails.companyName
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].companyId.patchValue(
this.detailsOfCompany.companyId
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].country.patchValue(
this.detailsOfCompany.companyDetails.country
);
 this.callCurrencyManualAddr(
this.detailsOfCompany.companyDetails.country,
"shipper"
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].state.patchValue(
this.detailsOfCompany.companyDetails.province
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].zipCode.patchValue(
this.detailsOfCompany.companyDetails.zipcode
);
this.postalValid = true;
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].city.patchValue(
this.detailsOfCompany.companyDetails.city
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(
this.detailsOfCompany.companyDetails.streetLine1
);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine2.patchValue(
this.detailsOfCompany.companyDetails.streetLine2
);
if (!this.postalValid) {
this.showDetailedAddressError = true;
this.toastr.error("Please select shipper address type", "", {
timeOut: 10000,
});
} else {
this.showDetailedAddressError = false;
}
} else {
this.saveQuoteDataObj["destinationAddress"]["fullAddr"][index] =
this.detailsOfCompany.companyDetails.fullAddress;
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].latitude.patchValue(
this.detailsOfCompany.companyDetails.latitude
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].longitude.patchValue(
this.detailsOfCompany.companyDetails.longitude
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].fullAddr.patchValue(
this.detailsOfCompany.companyDetails.fullAddress
);
// this.orderDetailForm.get('consignees')['controls'][index]
['controls'].hopIndex.patchValue(index);
this.orderDetailForm
 .get("consignees")
["controls"][index]["controls"].company.patchValue(
this.detailsOfCompany.companyDetails.companyName
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].companyId.patchValue(
this.detailsOfCompany.companyId
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].country.patchValue(
this.detailsOfCompany.companyDetails.country
);
this.callCurrencyManualAddr(
this.detailsOfCompany.companyDetails.country,
"consignee"
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].state.patchValue(
this.detailsOfCompany.companyDetails.province
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].zipCode.patchValue(
this.detailsOfCompany.companyDetails.zipcode
);
this.postalValid = true;
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].city.patchValue(
this.detailsOfCompany.companyDetails.city
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(
this.detailsOfCompany.companyDetails.streetLine1
);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine2.patchValue(
this.detailsOfCompany.companyDetails.streetLine2
);
if (!this.postalValid) {
this.showDetailedEndAddressError = true;
} else {
this.showDetailedEndAddressError = false;
}
this.displayCurrency();
}
this.displayCourier = false;
this.calculateTotalChargeInPayment();
})
.catch((error) => {
this.displayCourier = false;
this.toastr.error("Something went wrong.", "Oops", { timeOut: 10000 });
});
}
onOptionsSelected(location) {
this.showShipperWarningAdd = false;
this.saveQuoteDataObj["sourceAddress"]["addrTypeId"] = location;
this.accesserialLabelStart = "Loading Accessorial..";
this.acceserialStart = [];
let url =
ServerURLS.getLocationShpmtServcs.action +
"?locTypeId=" +
location +
"&locType=start";
this.scHttpService.getHttpService(url, "").then((data) => {
this.accessorialData["start"] = data["data"];
this.accesserialLabelStart = "Select Accessorial";
});
if (this.shearchaddress2) {
this.accessorialData["start"].forEach((item, index) => {
this.detailsOfCompany["accessorialDetails"]["accessorialList"].forEach(
(itm, i) => {
if (item.servIceId == itm.id) {
this.selectAccessorial(index, "start");
}
}
);
});
}
}

onOptionsSelectedConsignee(location) {
this.showConsigneeWarningAdd = false;
this.saveQuoteDataObj["destinationAddress"]["addrTypeId"] = location;
this.accesserialLabelEnd = "Loading Accessorial..";
this.acceserialEnd = [];
let url =
ServerURLS.getLocationShpmtServcs.action +
"?locTypeId=" +
location +
"&locType=end";
this.scHttpService.getHttpService(url, "").then((data) => {
//this.acceserialEnd = data['data'];
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.accessorialData["end"] = data["data"];
this.accesserialLabelEnd = " Select Accessorial";
if (this.shipAgainQuoteID) {
this.getExtraservicesData(this.shipAgainQuoteID);
}
if (this.shearchaddress2) {
this.accessorialData["end"].forEach((item, index) => {
this.detailsOfCompany["accessorialDetails"][
"accessorialList"
].forEach((itm, i) => {
if (item.servIceId == itm.id) {
this.selectAccessorial(index, "end");
}
});
});
}
});
}

getExtraservicesData(quoteId) {
let getQuoteExtraServiceStartUrl =
ServerURLS.getQuoteExtraService.action +
"?quoteId=" +
quoteId +
"&locType=" +
"start";
this.scHttpService
.getHttpService(getQuoteExtraServiceStartUrl, "")
.then((result) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
if (result["data"]) {
this.accessorialData["start"].forEach((item, index) => {
result["data"].forEach((itm, i) => {
if (item.servIceId == itm.uuid) {
this.selectAccessorial(index, "start");
}
});
});
}
});

let getQuoteExtraServiceEndUrl =
ServerURLS.getQuoteExtraService.action +
"?quoteId=" +
quoteId +
"&locType=" +
"end";
this.scHttpService
.getHttpService(getQuoteExtraServiceEndUrl, "")
.then((result) => {
if (result["data"]) {
this.accessorialData["end"].forEach((item, index) => {
result["data"].forEach((itm, i) => {
if (item.servIceId == itm.uuid) {
this.selectAccessorial(index, "end");
}
});
});
}
});
}

setUnitValue(value) {
this.measurementType = value;
this.setValue();
}
setValue() {
//If Metric cm and kg
//else imperial inch and Lbs
if (
this.selectedShmtModeId == "cd6bdba2-e7ae-11e9-8462-163046d26cd4" && //LTL
this.selectedPkgTypeId == "b8e221f4-f312-11e9-8462-163046d26cd4" //Pallet
) {
if (this.measurementType == "metric") {
//Metric
 (
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("width")
.patchValue(121.92);
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("length")
.patchValue(121.92);
} else {
//imperial
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("width")
.patchValue(48);
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("length")
.patchValue(48);
}
} else {
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("width")
.patchValue("");
(
(this.orderDetailForm.get("shipmentItem") as FormArray).at(
0
) as FormGroup
)
.get("length")
.patchValue("");
}
}

getzipcodestart(
formatted_address,
address,
geometry,
factor,
index,
companyName,
googleMapId?
) {
let tempObjSet = {
 sourceAddress: {
latitude: "",
longitude: "",
fullAddr: "",
addrLine1: "",
addrLine2: "",
country: "",
city: "",
state: "",
zipCode: "",
website: "",

company: "",
companyId: "",
},
destinationAddress: {},
};

//set latitude, longitude and fullAddr

if (geometry.lat()) {
if (factor == "start") {
// tempObjSet['sourceAddress']['latitude'] = geometry.lat();
// tempObjSet['sourceAddress']['longitude'] = geometry.lng();
// tempObjSet['sourceAddress']['fullAddr'] = formatted_address;

this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].latitude.patchValue(geometry.lat());
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].longitude.patchValue(geometry.lng());
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].fullAddr.patchValue(
formatted_address
);
} else {
// tempObjSet['destinationAddress']['latitude'] = geometry.lat();
// tempObjSet['destinationAddress']['longitude'] = geometry.lng();
// tempObjSet['destinationAddress']['fullAddr'] = formatted_address;

this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].latitude.patchValue(geometry.lat());
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].longitude.patchValue(geometry.lng());
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].fullAddr.patchValue(
formatted_address
);
}
}

//set hop Index

// if (factor == 'start') {
// // tempObjSet['sourceAddress']['hopIndex'] = index;
// this.orderDetailForm.get('shippers')['controls'][index]
['controls'].hopIndex.patchValue(index);
// } else {
// // tempObjSet['destinationAddress']['hopIndex'] = index;
// this.orderDetailForm.get('consignees')['controls'][index]
['controls'].hopIndex.patchValue(index);
// }

//set companyName
if (factor == "start") {
// tempObjSet['sourceAddress']['company'] = companyName;
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].company.patchValue(companyName);
} else {
// tempObjSet['destinationAddress']['company'] = companyName;
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].company.patchValue(companyName);
}

//set companyId
if (factor === "start") {
// tempObjSet['sourceAddress']['companyId'] = null;
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].companyId.patchValue(null);
} else {
// tempObjSet['destinationAddress']['companyId'] = null;
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].companyId.patchValue(null);
}
//set google Map Id
if (factor === "start") {
// tempObjSet['sourceAddress']['companyId'] = null;
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].googleMapId.patchValue(googleMapId);
} else {
// tempObjSet['destinationAddress']['companyId'] = null;
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].googleMapId.patchValue(googleMapId);
}

for (let key in address) {

//get country
if (address[key]["types"][0] == "country") {
if (factor == "start") {
// tempObjSet['sourceAddress']['country'] = address[key]['short_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].country.patchValue(
address[key]["short_name"]
);
} else {
// tempObjSet['destinationAddress']['country'] = address[key]
['short_name'];
this.orderDetailForm
 .get("consignees")
["controls"][index]["controls"].country.patchValue(
address[key]["short_name"]
);
}
}

//select state
if (address[key]["types"][0] == "administrative_area_level_1") {
if (factor == "start") {
// tempObjSet['sourceAddress']['state'] = address[key]['short_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].state.patchValue(
address[key]["short_name"]
);
} else {
// tempObjSet['destinationAddress']['state'] = address[key]
['short_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].state.patchValue(
address[key]["short_name"]
);
}
}

//select postal_code
if (address[key]["types"][0] == "postal_code") {
if (factor == "start") {
// tempObjSet['sourceAddress']['zipCode'] = address[key]['long_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].zipCode.patchValue(
address[key]["long_name"]
);
} else {
// tempObjSet['destinationAddress']['zipCode'] = address[key]
['long_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].zipCode.patchValue(
address[key]["long_name"]
);
}
this.postalValid = true;
}

//select city
if (
address[key]["types"][0] == "locality" ||
address[key]["types"][0] == "sublocality_level_1" ||
address[key]["types"][0] == "neighborhood"
) {
if (factor === "start") {
// tempObjSet['sourceAddress']['city'] = address[key]['short_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].city.patchValue(
 address[key]["short_name"]
);
} else {
// tempObjSet['destinationAddress']['city'] = address[key]['short_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].city.patchValue(
address[key]["short_name"]
);
}
}

//select addressLine1 and 2

if (factor === "start") {
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine2.patchValue("");
let stepStart = 0;
if (
!this.orderDetailForm.get("shippers")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "subpremise"
) {
stepStart++;
// tempObjSet['sourceAddress']['addrLine1'] = address[key]['long_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}
if (
!this.orderDetailForm.get("shippers")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "street_number"
) {
stepStart++;
// tempObjSet['sourceAddress']['addrLine1'] = address[key]['long_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}

if (
!this.orderDetailForm.get("shippers")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "route"
) {
stepStart++;
// tempObjSet['sourceAddress']['addrLine1'] = address[key]['long_name'];
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}
 if (
this.orderDetailForm.get("shippers")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "route"
) {
stepStart++;
// tempObjSet['sourceAddress']['addrLine2'] = address[key]['long_name'];
// this.orderDetailForm.get('shippers')['controls'][index]
['controls'].addrLine2.patchValue(address[key]['long_name']);
this.orderDetailForm
.get("shippers")
["controls"][index]["controls"].addrLine1.patchValue(
this.orderDetailForm.get("shippers")["controls"][index][
"controls"
].addrLine1.value +
" " +
address[key]["short_name"]
);
}
if (
!this.orderDetailForm.get("shippers")["controls"][index]["controls"]
.addrLine1.value &&
!stepStart
) {
//tempObjSet['sourceAddress']['addrLine1'] = formatted_address.split(",
")[0];
//tempObjSet['sourceAddress']['addrLine2'] = formatted_address.split(",
")[1];
//tempObjSet['sourceAddress']['addrLine1'] = " ";

this.showDetailedAddressError = true;
//tempObjSet['sourceAddress']['addrLine2'] = " ";
return;
}
} else {
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine2.patchValue("");
let stepStartConsignee = 0;
if (
!this.orderDetailForm.get("consignees")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "subpremise"
) {
stepStartConsignee++;
// tempObjSet['destinationAddress']['addrLine1'] = address[key]
['long_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}
if (
!this.orderDetailForm.get("consignees")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "street_number"
) {
stepStartConsignee++;
 // tempObjSet['destinationAddress']['addrLine1'] = address[key]
['long_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}

if (
!this.orderDetailForm.get("consignees")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "route"
) {
stepStartConsignee++;
// tempObjSet['destinationAddress']['addrLine1'] = address[key]
['long_name'];
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(
address[key]["long_name"]
);
}

if (
this.orderDetailForm.get("consignees")["controls"][index]["controls"]
.addrLine1.value &&
address[key]["types"][0] === "route"
) {
stepStartConsignee++;
// tempObjSet['destinationAddress']['addrLine2'] = address[key]
['long_name'];
// this.orderDetailForm.get('consignees')['controls'][index]
['controls'].addrLine2.patchValue(address[key]['long_name']);
this.orderDetailForm
.get("consignees")
["controls"][index]["controls"].addrLine1.patchValue(
this.orderDetailForm.get("consignees")["controls"][index][
"controls"
].addrLine1.value +
" " +
address[key]["short_name"]
);
}

if (
!this.orderDetailForm.get("consignees")["controls"][index]["controls"]
.addrLine1.value &&
!stepStartConsignee
) {
//tempObjSet['destinationAddress']['addrLine1'] =
formatted_address.split(", ")[0];
//tempObjSet['destinationAddress']['addrLine2'] =
formatted_address.split(", ")[2];
// tempObjSet['destinationAddress']['addrLine1'] = " ";
// tempObjSet['destinationAddress']['addrLine2'] = " ";
this.showDetailedEndAddressError = true;
return;
}
 }
}

if (factor == "start" && !this.postalValid) {

this.showDetailedAddressError = true;
this.toastr.error("Please select shipper address type", "", {
timeOut: 10000,
});
} else {
this.showDetailedAddressError = false;
}

if (factor == "end" && !this.postalValid) {

this.showDetailedEndAddressError = true;
} else {
this.showDetailedEndAddressError = false;
}
}
increamentByOne(i: any, fieldName: string) {
if (fieldName === "quantity") {
let quantity =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls
.quantity.value;
if (quantity === undefined || quantity === "" || quantity === null) {
quantity = 1;
} else {
quantity = parseInt(quantity) + 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
quantity: quantity,
});
this.calculateTotalQuantity("weight");

this.calculateTotalQuantity("quantity");

if (this.isOutBoundInBoundApplicable) {
this.calculateOutBoundAndInBoundCharge();
this.calculateTotalChargeInPayment();
}
} else if (fieldName === "weight") {
let weight =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.weight
.value;
if (weight === undefined || weight === null || weight === "") {
weight = 1;
} else {
weight = parseInt(weight) + 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
weight: weight,
});
this.calculateTotalQuantity("weight");
} else if (fieldName === "width") {
let width =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.width
.value;
if (width === undefined || width === "" || width === null) {
width = 1;
} else {
 width = parseInt(width) + 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
width: width,
});
this.calculateTotalQuantity("width");
} else if (fieldName === "length") {
let length =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.length
.value;
if (length === undefined || length === "" || length === null) {
length = 1;
} else {
length = parseInt(length) + 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
length: length,
});
this.calculateTotalQuantity("length");
} else if (fieldName === "height") {
let height =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.height
.value;
if (height === undefined || height === "" || height === null) {
height = 1;
} else {
height = parseInt(height) + 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
height: height,
});
this.calculateTotalQuantity("height");
}
}
decreamentByOne(i: any, fieldName: string) {
if (fieldName === "quantity") {
let quantity =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls
.quantity.value;
if (
quantity === undefined ||
quantity === "" ||
quantity === null ||
quantity <= 1
) {
quantity = 1;
} else {
if (parseInt(quantity) == 1) {
quantity = 1;
} else {
quantity = parseInt(quantity) - 1;
}
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
quantity: quantity,
});
this.calculateTotalQuantity("quantity");
} else if (fieldName === "weight") {
let weight =
 this.orderDetailForm.get("shipmentItem")["controls"][i].controls.weight
.value;
if (
weight === undefined ||
weight === null ||
weight === "" ||
weight <= 1
) {
weight = 1;
} else {
if (parseInt(weight) == 1) {
weight = 1;
} else {
weight = parseInt(weight) - 1;
}
// weight = parseInt(weight) - 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
weight: weight,
});
this.calculateTotalQuantity("weight");
} else if (fieldName === "width") {
let width =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.width
.value;
if (width === undefined || width === null || width === "" || width <= 1) {
width = 1;
} else {
if (parseInt(width) == 1) {
width = 1;
} else {
width = parseInt(width) - 1;
}
// width = parseInt(width) - 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
width: width,
});
this.calculateTotalQuantity("width");
} else if (fieldName === "length") {
let length =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.length
.value;
if (
length === undefined ||
length === null ||
length === "" ||
length <= 1
) {
length = 1;
} else {
if (parseInt(length) == 1) {
length = 1;
} else {
length = parseInt(length) - 1;
}
// length = parseInt(length) - 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
 length: length,
});
this.calculateTotalQuantity("length");
} else if (fieldName === "height") {
let height =
this.orderDetailForm.get("shipmentItem")["controls"][i].controls.height
.value;
if (
height === undefined ||
height === null ||
height === "" ||
height <= 1
) {
height = 1;
} else {
if (parseInt(height) == 1) {
height = 1;
} else {
height = parseInt(height) - 1;
}
// height = parseInt(height) - 1;
}
this.orderDetailForm.get("shipmentItem")["controls"][i].patchValue({
height: height,
});
this.calculateTotalQuantity("height");
}
}
calculateTotalQuantity(columnName: string) {
if (columnName === "quantity") {
let totalSum = 0;
let totalWeight = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element, index) => {
let d = 0;
if (
element.controls.quantity.value === undefined ||
element.controls.quantity.value === null ||
element.controls.quantity.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
let weight =
this.orderDetailForm.get("shipmentItem")["controls"][index]
.controls.weight.value;
if (weight !== null && weight !== "") {
totalWeight =
totalWeight +
parseInt(element.controls.quantity.value) * parseFloat(weight);
}
totalSum = totalSum + parseInt(element.controls.quantity.value);
}
});
this.totalOfWeight = totalWeight;
this.totalOfQuantity = totalSum;
//calcualting the total quantity for out bound and in bound logic
//b8e221f4-f312-11e9-8462-163046d26cd4 pallet id
 //b8e223fe-f312-11e9-8462-163046d26cd4 boxed id
if (this.isOutBoundInBoundApplicable) {
this.calculateTotalOutBoundInBoutnCharge();
}
} else if (columnName === "weight") {
let totalSum = 0;
let quantity = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element, index) => {
let d = 0;

if (
element.controls.weight.value === undefined ||
element.controls.weight.value === null ||
element.controls.weight.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
let quantity =
this.orderDetailForm.get("shipmentItem")["controls"][index]
.controls.quantity.value;
if (quantity !== null && quantity !== "") {
totalSum =
totalSum +
parseFloat(element.controls.weight.value) * parseInt(quantity);
}
}
});

this.totalOfWeight = totalSum;
} else if (columnName === "width") {
let totalSum = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element) => {
let d = 0;
if (
element.controls.width.value === undefined ||
element.controls.width.value === null ||
element.controls.width.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
totalSum = totalSum + parseFloat(element.controls.width.value);
}
});
this.totalofWidth = totalSum;
} else if (columnName === "length") {
let totalSum = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element) => {
let d = 0;
if (
element.controls.length.value === undefined ||
element.controls.length.value === null ||
 element.controls.length.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
totalSum = totalSum + parseFloat(element.controls.length.value);
}
});
this.totalofLength = totalSum;
} else if (columnName === "height") {
let totalSum = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element) => {
let d = 0;
if (
element.controls.height.value === undefined ||
element.controls.height.value === null ||
element.controls.height.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
totalSum = totalSum + parseFloat(element.controls.height.value);
}
});
this.totalofHeight = totalSum;
} else if (columnName === "shipmentValue") {
let totalSum = 0;
this.orderDetailForm
.get("shipmentItem")
["controls"].forEach((element) => {
let d = 0;
if (
element.controls.shipmentValue.value === undefined ||
element.controls.shipmentValue.value === null ||
element.controls.shipmentValue.value === ""
) {
d = 0;
totalSum = totalSum + d;
} else {
totalSum =
totalSum + parseFloat(element.controls.shipmentValue.value);
}
});
this.totalofShipmentValue = totalSum;
}

this.handleInOutBoundQty();
}

calculateTotalOutBoundInBoutnCharge() {
if (!this.editOrder) {
let totalPalletCount = 0;
let totalBoxCount = 0;
let shipmentItems = this.orderDetailForm.get("shipmentItem").value;
shipmentItems.forEach((element, index) => {
if (element.packageName == "b8e221f4-f312-11e9-8462-163046d26cd4") {
totalPalletCount = totalPalletCount + element.quantity;
 }
if (element.packageName == "b8e223fe-f312-11e9-8462-163046d26cd4") {
totalBoxCount = totalBoxCount + element.quantity;
}
});
let indexOfPalletItem = [];
let indexOfBoxedItem = [];
this.outBoundInBoundChargeArray.forEach((element, index) => {
if (element.chargeName == "Pallet Outbound Fee") {
indexOfPalletItem.push(index);
}
if (element.chargeName == "Pallet Inbound Fee") {
indexOfPalletItem.push(index);
}
if (element.chargeName == "Box Outbound Fee") {
indexOfBoxedItem.push(index);
}
if (element.chargeName == "Box Inbound Fee") {
indexOfBoxedItem.push(index);
}
});

// indexOfBoxedItem.forEach((element, index) => {

// this.outBoundInBoundChargeArray[element].quantity = totalBoxCount
// })
// indexOfPalletItem.forEach((element, index) => {
// this.outBoundInBoundChargeArray[element].quantity = totalPalletCount
// })
this.totalAmountOfOutBountAndInBound = 0;
this.outBoundInBoundChargeArray.forEach((element, index) => {
this.totalAmountOfOutBountAndInBound =
this.totalAmountOfOutBountAndInBound +
element.quantity * element.price;
});
this.calculatePalletInBountOutBOundTax();
this.calculateTotalChargeInPayment();
} else {
let shipmentItem = this.orderDetailForm.get("shipmentItem").value;
let totalPalletCount = 0;
let totalBoxCount = 0;
shipmentItem.forEach((element, index) => {
if (element.packageName == "b8e221f4-f312-11e9-8462-163046d26cd4") {
totalPalletCount = totalPalletCount + element.quantity;
}
if (element.packageName == "b8e223fe-f312-11e9-8462-163046d26cd4") {
totalBoxCount = totalBoxCount + element.quantity;
}
});
this.orderDetailForm
.get("paymentDetails")
.value.forEach((element, index) => {
if (
element.autoChargeItem.includes("Pallet") &&
(element.autoChargeItem.includes("Outbound") ||
element.autoChargeItem.includes("Inbound"))
) {
// this.orderDetailForm.get('paymentDetails')['controls'][index]
['controls'].quantity=
this.orderDetailForm
 .get("paymentDetails")
["controls"][index].patchValue({
quantity: totalPalletCount,
totalCharge: totalPalletCount * 7.5,
});
}
if (
element.autoChargeItem.includes("Box") &&
(element.autoChargeItem.includes("Outbound") ||
element.autoChargeItem.includes("Inbound"))
) {
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
quantity: totalBoxCount,
totalCharge: totalBoxCount * 1.5,
});
}
});
this.calculateTotalChargeInPayment();
}
}

setChargeDesctiption(value, index, isAutoChargeItem?) {

this.defaultTaxGroup = this.allTaxList.length
? this.allTaxList.find(
(data) => data.taxPercent == this.globalTaxPercentage
)
: {
taxName: "NO TAX",
taxPercent: 0.0,
};
if (isAutoChargeItem) {
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
chargeDescription: value,
});
} else {
this.chargeList.forEach((element) => {
if (element.chargeId === value) {
const price = parseFloat(element.baseRate).toFixed(2);
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
chargeDescription: element.chargeDesc,
price: price,
quantity: 0,
taxGroup: this.orderDetailForm.get("paymentDetails")["controls"][
index
].controls.taxGroup.value
? this.orderDetailForm.get("paymentDetails")["controls"][index]
.controls.taxGroup.value
: this.defaultTaxGroup.taxName,
});
this.cdr.detectChanges();
}
});
}

this.increaseByOneInPayment(index);
 this.calculateTotalChargeInPayment();
}

increaseByOneInPayment(index: any) {
let value =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.quantity.value;
if (value === undefined || value === null || value === "") {
value = 0;
} else {
value = 1 + parseInt(value);
}

this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
quantity: value,
});
let price =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.price.value;
if (price === undefined || price === null || price === "") {
price = 0;
}
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
totalCharge: price * value,
});
this.calculateTotolFuelSurchargeInPaymentDetials();

this.calculateTotalChargeInPayment();
}
decreaseByOneInPayment(index: any) {
let value =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.quantity.value;
if (value === undefined || value === null || value === "" || value <= 0) {
value = 0;
} else {
value = parseInt(value) - 1;
}

this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
quantity: value,
});
let price =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.price.value;
if (price === undefined || price === null || price === "") {
price = 0;
}
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
totalCharge: price * value,
});
this.calculateTotolFuelSurchargeInPaymentDetials();

this.calculateTotalChargeInPayment();
}
priceAndQuantityInput(index: any, columnName: any, value: any) {
if (columnName === "quantity") {
let price =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
 .price.value;
if (price === undefined || price === null || price === "") {
price = 0;
}
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
totalCharge: price * value,
});
} else if (columnName === "price") {
let quantity =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.quantity.value;
if (
quantity === undefined ||
quantity === null ||
quantity === "" ||
quantity <= 0
) {
quantity = 0;
}
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
totalCharge: quantity * value,
});
}
this.calculateTotolFuelSurchargeInPaymentDetials();
this.calculateTotalChargeInPayment();
}
calculateHSTAndGST() {
this.isInitial = false;
let gst: any = 0;
let hst: any = 0;
let hst15: any = 0;
let totalAfs = 0;
let totalAfsGstTax = 0;
let totalAfsHstTax = 0;
let totalAfsHst15Tax = 0;
this.orderDetailForm
.get("paymentDetails")
["controls"].forEach((element, index) => {
if (element.controls.afs.value) {
let currentValue = 0;
if (element.controls.fuelType.value == "percentage") {
currentValue =
((element.controls.quantity.value
? element.controls.quantity.value
: 1) *
(parseFloat(element.controls.price.value) *
parseFloat(element.controls.fuelCharge.value))) /
100;
} else {
currentValue =
(element.controls.quantity.value
? element.controls.quantity.value
: 1) * parseFloat(element.controls.fuelCharge.value);
}
totalAfs = totalAfs + currentValue;
if (element.controls.taxGroup.value == "GST 5") {
totalAfsGstTax =
totalAfsGstTax +
(currentValue * this.allTaxListMap["GST 5"].taxPercent) / 100;
 } else if (element.controls.taxGroup.value == "HST 13") {
totalAfsHstTax =
totalAfsHstTax +
(currentValue * this.allTaxListMap["HST 13"].taxPercent) / 100;
} else if (element.controls.taxGroup.value == "HST 15") {
totalAfsHst15Tax =
totalAfsHst15Tax +
(currentValue * this.allTaxListMap["HST 15"].taxPercent) / 100;
}
}
if (element.controls.taxGroup.value == "GST 5") {
gst =
gst +
(element.controls.quantity.value
? element.controls.quantity.value
: 1) *
parseFloat(
element.controls.price.value
? element.controls.price.value
: "0"
);
} else if (element.controls.taxGroup.value == "HST 13") {
hst =
hst +
(element.controls.quantity.value
? element.controls.quantity.value
: 1) *
parseFloat(
element.controls.price.value
? element.controls.price.value
: "0"
);
} else if (element.controls.taxGroup.value == "HST 15") {
hst15 =
hst15 +
(element.controls.quantity.value
? element.controls.quantity.value
: 1) *
parseFloat(
element.controls.price.value
? element.controls.price.value
: "0"
);
}
});
let totalCharge = 0;
this.outBoundInBoundChargeArray.forEach((element, index) => {
if (
element.chargeName.includes("Outbound") ||
element.chargeName.includes("Inbound")
) {
totalCharge = totalCharge + element.quantity * element.price;
}
});

this.palletInBountOutTax = ((totalCharge * 13) / 100).toFixed(2);

if (Object.keys(this.allTaxListMap).length > 0) {
this.allTaxListMap["GST 5"].totalAmount = parseFloat(gst).toFixed(2);
this.allTaxListMap["GST 5"].tax = parseFloat(
 (gst * this.allTaxListMap["GST 5"].taxPercent) / 100 +
totalAfsGstTax +
""
).toFixed(2);
this.allTaxListMap["HST 13"].totalAmount = parseFloat(hst).toFixed(2);
this.allTaxListMap["HST 13"].tax = parseFloat(
(hst * this.allTaxListMap["HST 13"].taxPercent) / 100 +
(totalCharge * 13) / 100 +
totalAfsHstTax +
""
).toFixed(2);
this.allTaxListMap["HST 15"].totalAmount = parseFloat(hst15).toFixed(2);
this.allTaxListMap["HST 15"].tax = parseFloat(
(hst15 * this.allTaxListMap["HST 15"].taxPercent) / 100 +
totalAfsHst15Tax +
""
).toFixed(2);
this.totalHstGstTax =
parseFloat(this.allTaxListMap["GST 5"].tax) +
parseFloat(this.allTaxListMap["HST 13"].tax) +
parseFloat(this.allTaxListMap["HST 15"].tax);
// console.log(this.allTaxListMap)
// console.log("totalAfsTax",totalAfsTax);
// console.log("totalAfs",totalAfs);
// console.log(this.outBoundInBoundChargeArray);
// console.log("totalHstGstTax",this.totalHstGstTax);
}
}
calculateTotalChargeInPayment() {
this.calculateHSTAndGST();
let sum = 0;
let sum1 = 0;
this.fscTotal = 0;
this.orderDetailForm
.get("paymentDetails")
["controls"].forEach((element, index) => {
if (
element.controls.autoChargeItem.value == "" ||
(element.controls.autoChargeItem.value != "" &&
element.controls.autoChargeItem.value == "Fuel Surcharge")
) {
sum = parseFloat(sum + element.controls.totalCharge.value);
} else if (
element.controls.autoChargeItem.value != "" &&
element.controls.autoChargeItem.value != "Fuel Surcharge"
) {
sum1 = parseFloat(sum1 + element.controls.totalCharge.value);
}
});
if (sum1 > 0) {
this.palletInBountOutTax = (sum1 * 13) / 100;
this.totalAmountOfOutBountAndInBound = sum1;
}

console.log(sum, this.totalAmountOfOutBountAndInBound);
this.totalChargePaymentDetails =
sum + parseFloat(this.totalAmountOfOutBountAndInBound);
// console.log(this.totalChargePaymentDetails)
const baseChargesValue = this.totalChargePaymentDetails - this.fscTotal;
 const formattedBaseChargesValue = baseChargesValue.toFixed(2);
this.orderDetailForm
.get("baseCharges")
.patchValue(formattedBaseChargesValue);

let taxPercentage = this.globalTaxPercentage;

// if (this.orderDetailForm.get('additionalCurrency').value == 'CAD') {
// taxPercentage = 13;
// } else {
// taxPercentage = 0;
// }

let fuelChargeAmount = parseFloat(

this.orderDetailForm.get("fscAmount").value
? this.orderDetailForm.get("fscAmount").value
: 0
);
if (
fuelChargeAmount > 0 &&
fuelChargeAmount !== null &&
fuelChargeAmount != undefined
) {
this.totalChargePaymentDetails =
this.totalChargePaymentDetails + fuelChargeAmount;
}

// let taxAmount = (sum+fuelChargeAmount) * taxPercentage / 100

let taxAmount = this.totalHstGstTax;
this.orderDetailForm.get("taxAmount").patchValue(taxAmount.toFixed(2));
// this.orderDetailForm.get('taxAmount').patchValue(((taxAmount) +
(this.palletInBountOutTax > 0 ? parseFloat(this.palletInBountOutTax) :
0)).toFixed(2))
this.orderDetailForm
.get("totalCharges")
.patchValue(
(parseFloat(this.totalChargePaymentDetails) + taxAmount).toFixed(2)
);
// this.totalofShipmentValue=sum+sum1
}
confirmOrder() {}
openModel() {
// this.modelService.open(this.loadContent, { centered: true, backdropClass:
'light-blue-backdrop', windowClass: 'dark-modal', backdrop: 'static' });
}
closeModel() {
this.modelService.dismissAll();
}

updateDate(event) {
const pattern = /^\d{4}([./-])\d{2}\1\d{2}$/;
let inputChar = event.target.value;
let d1 = Date.parse(inputChar);
let d2 = Date.parse(this.minDate);
if (d1 < d2) {
this.dateVal = false;
return;
} else {
this.dateVal = true;
}
 if (!pattern.test(inputChar)) {
this.dateVal = false;
return;
} else if ("undefined" == typeof this.todaysDate || "" == this.todaysDate) {
this.dateVal = false;
return;
} else {
this.dateVal = true;
this.todaysDate = inputChar;
}
}

hasSourceServicesOpted: boolean = false;

hasDestServicesOpted: boolean = false;
isShipperDateValidated: boolean = true;
isConsigneeDateValidated: boolean = true;
isCraditExit = false;
istodayforShipper: boolean = false;
modelTime: NgbTimeStruct;
diff;
pickupdate(type: any) {
const today = new Date();
const todayStruct: NgbDateStruct = {
year: today.getFullYear(),
month: today.getMonth() + 1,
day: today.getDate(),
};
if (type == "shipper") {
if (
this.orderDetailForm.value.shippers[0].shipperPickupDate.year ==
todayStruct.year &&
this.orderDetailForm.value.shippers[0].shipperPickupDate.month ==
todayStruct.month &&
this.orderDetailForm.value.shippers[0].shipperPickupDate.day ==
todayStruct.day
) {
this.istodayforShipper = true;
this.shipingHours.forEach((el) => {
let hourTxt = el.pickupTime.split(":");
if (this.checkTime(hourTxt[0], hourTxt[1])) {
el.showDisable = false;
} else {
el.showDisable = true;
}
});
const firstActiveItem = this.shipingHours.find(
(item) => item.showDisable === false
);
const lastActiveItem = this.shipingHours
.slice()
.reverse()
.find((item) => item.showDisable === false);
this.orderDetailForm.get("shippers")["controls"][0].patchValue({
shipperPickupFromTime: firstActiveItem.pickupId,
shipperPickupToTime: lastActiveItem.pickupId,
});
console.log(this.shipingHours);
} else {
this.shipingHours.forEach((el) => {
 el.showDisable = false;
});
this.istodayforShipper = false;
this.orderDetailForm.get("shippers")["controls"][0].patchValue({
shipperPickupFromTime: "c7b3e35a-f7ed-11e9-8462-163046d26cd4",
shipperPickupToTime: "c7b3e641-f7ed-11e9-8462-163046d26cd4",
});
}
} else {
if (
this.orderDetailForm.value.consignees[0].consigneePickupDate.year ==
todayStruct.year &&
this.orderDetailForm.value.consignees[0].consigneePickupDate.month ==
todayStruct.month &&
this.orderDetailForm.value.consignees[0].consigneePickupDate.day ==
todayStruct.day
) {
this.istodayforShipper = true;
this.shipingHours.forEach((el) => {
let hourTxt = el.pickupTime.split(":");
if (this.checkTime(hourTxt[0], hourTxt[1])) {
el.showDisable = false;
} else {
el.showDisable = true;
}
});
const firstActiveItem = this.shipingHours.find(
(item) => item.showDisable === false
);
const lastActiveItem = this.shipingHours
.slice()
.reverse()
.find((item) => item.showDisable === false);
this.orderDetailForm.get("consignees")["controls"][0].patchValue({
consigneePickupFromTime: firstActiveItem.pickupId,
consigneePickupToTime: lastActiveItem.pickupId,
});
console.log(this.shipingHours);
} else {
this.istodayforShipper = false;
this.shipingHours.forEach((el) => {
el.showDisable = false;
});
this.orderDetailForm.get("consignees")["controls"][0].patchValue({
consigneePickupFromTime: "c7b3e35a-f7ed-11e9-8462-163046d26cd4",
consigneePickupToTime: "c7b3e641-f7ed-11e9-8462-163046d26cd4",
});
}
}
}
checkTime(hour: number, minute: number): boolean {
const result = this.commonService.isAtLeast30MinutesMore(hour, minute);
if (result) {
return true;
} else {
return false;
}
}
 assignOrder() {
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.enable();
this.checkDestroyReason = "goBack";
this.setFromDataOnChangeProBill("create");
this.openModel();
if (this.orderDetailForm.invalid && !this.orderDetailForm.valid) {
this.orderDetailForm.markAllAsTouched();
this.closeModel();
this.toastr.error("Please fill all the required details", "", {
timeOut: 10000,
});
} else {
let shippersLength = this.orderDetailForm.value.shippers.length;
let consigneesLength = this.orderDetailForm.value.consignees.length;
sessionStorage.setItem(
"_adminpickupdateForMarsh",
this.orderDetailForm.value.shippers[0].shipperPickupDate.year +
"-" +
this.orderDetailForm.value.shippers[0].shipperPickupDate.month +
"-" +
this.orderDetailForm.value.shippers[0].shipperPickupDate.day
);
if (shippersLength > 1) {
let prevShipDateStr = "";
let currShipDateStr = "";
for (let shipperDetail of this.orderDetailForm.value.shippers) {
if (shipperDetail.hopIndex == 0) {
// prevShipDateStr = shipperDetail.shipperPickupDate.month + '.' +
shipperDetail.shipperPickupDate.day + '.' + shipperDetail.shipperPickupDate.year;
prevShipDateStr =
shipperDetail.shipperPickupDate.year +
"-" +
shipperDetail.shipperPickupDate.month +
"-" +
shipperDetail.shipperPickupDate.day +
" 00:00:00";
} else {
// currShipDateStr = shipperDetail.shipperPickupDate.month + '.' +
shipperDetail.shipperPickupDate.day + '.' + shipperDetail.shipperPickupDate.year;
currShipDateStr =
shipperDetail.shipperPickupDate.year +
"-" +
shipperDetail.shipperPickupDate.month +
"-" +
shipperDetail.shipperPickupDate.day +
" 00:00:00";
let prevShipDate: Date = new Date(prevShipDateStr);
let currShipDate: Date = new Date(currShipDateStr);
if (prevShipDate <= currShipDate) {
this.isShipperDateValidated = true;
prevShipDateStr = currShipDateStr;
} else {
this.isShipperDateValidated = false;
this.closeModel();
this.toastr.error(
"Each shipper date should be greater than or equals to prev shipper
date",
 "",
{ timeOut: 10000 }
);
break;
}
}
}
}
if (consigneesLength > 1) {
let prevConsDateStr = "";
let currConsDateStr = "";
for (let consigneeDetail of this.orderDetailForm.value.consignees) {
if (consigneeDetail.hopIndex == 0) {
// prevConsDateStr = consigneeDetail.consigneePickupDate.month + '.' +
consigneeDetail.consigneePickupDate.day + '.' +
consigneeDetail.consigneePickupDate.year;
prevConsDateStr =
consigneeDetail.consigneePickupDate.year +
"-" +
consigneeDetail.consigneePickupDate.month +
"-" +
consigneeDetail.consigneePickupDate.day +
" 00:00:00";
} else {
// currConsDateStr = consigneeDetail.consigneePickupDate.month + '.' +
consigneeDetail.consigneePickupDate.day + '.' +
consigneeDetail.consigneePickupDate.year;
currConsDateStr =
consigneeDetail.consigneePickupDate.year +
"-" +
consigneeDetail.consigneePickupDate.month +
"-" +
consigneeDetail.consigneePickupDate.day +
" 00:00:00";
let prevConsDate: Date = new Date(prevConsDateStr);
let currConsDate: Date = new Date(currConsDateStr);
if (prevConsDate <= currConsDate) {
this.isConsigneeDateValidated = true;
prevConsDateStr = currConsDateStr;
} else {
this.isConsigneeDateValidated = false;
this.closeModel();
this.toastr.error(
"Each consignee date should be greater than or equals to prev
consignee date",
"",
{ timeOut: 10000 }
);
break;
}
}
}
}

if (this.isShipperDateValidated && this.isConsigneeDateValidated) {

// let lastShipDateStr =
this.orderDetailForm.value.shippers[shippersLength-1].shipperPickupDate.month + '.'
+ this.orderDetailForm.value.shippers[shippersLength-1].shipperPickupDate.day + '.'
+ this.orderDetailForm.value.shippers[shippersLength-1].shipperPickupDate.year
 // let firstConsDateStr =
this.orderDetailForm.value.consignees[0].consigneePickupDate.month + '.' +
this.orderDetailForm.value.consignees[0].consigneePickupDate.day + '.' +
this.orderDetailForm.value.consignees[0].consigneePickupDate.year
let lastShipDateStr =
this.orderDetailForm.value.shippers[shippersLength - 1]
.shipperPickupDate.year +
"-" +
this.orderDetailForm.value.shippers[shippersLength - 1]
.shipperPickupDate.month +
"-" +
this.orderDetailForm.value.shippers[shippersLength - 1]
.shipperPickupDate.day +
" 00:00:00";
let firstConsDateStr =
this.orderDetailForm.value.consignees[0].consigneePickupDate.year +
"-" +
this.orderDetailForm.value.consignees[0].consigneePickupDate.month +
"-" +
this.orderDetailForm.value.consignees[0].consigneePickupDate.day +
" 00:00:00";
let lastShipDate: Date = new Date(lastShipDateStr);
let firstConsDate: Date = new Date(firstConsDateStr);
if (lastShipDate <= firstConsDate) {
this._loaderService.stringSubject.next(true);
let shpmntItems = [];
for (let shpmntItem of this.orderDetailForm.get("shipmentItem")
.value) {
let shpmntItemObj = {};
shpmntItemObj = {
qty: shpmntItem.quantity,
totalWeight: shpmntItem.weight,
length: shpmntItem.length,
breadth: shpmntItem.width,
height: shpmntItem.height,
unit: this.measurementType == "metric" ? "cm" : "inch",
wghtUnit: this.measurementType == "metric" ? "kg" : "lbs",
packaging: this.shmtModeCourier ? null : shpmntItem.packageName,
// "styleCode": 'boxed',
styleCode: this.selectedPkgStyleCode,
showFreight: true, // no idea - sent true directly in get quote as
well at line no. 443
freightClass:
this.shmtModeCourier == true
? null
: this.getfrieghtClassId(shpmntItem.class), //freightId
freightRange:
this.shmtModeCourier == true ? null : shpmntItem.class,
//freightCategory
lengthType: this.measurementType,
description: shpmntItem.description,
shipmentItemValue: shpmntItem.shipmentValue,
shipmentItemValueCurrency: shpmntItem.shipmentValueCurrencyCode,
stackable: shpmntItem.stackable,
hazMat: shpmntItem.hazmat,
hazardClass:
shpmntItem.hazmatHazardClass == ""
? null
: shpmntItem.hazmatHazardClass,
 unNumType: shpmntItem.hazmatNU == "" ? null : shpmntItem.hazmatNU,
packageGroup:
shpmntItem.hazmatPackageGroup == ""
? null
: shpmntItem.hazmatPackageGroup,
hazardPackagingType:
shpmntItem.hazmatPackageType == ""
? null
: shpmntItem.hazmatPackageType,
properShippingName:
shpmntItem.hazmatShipperName == ""
? null
: shpmntItem.hazmatShipperName,
unNumber:
shpmntItem.hazmatUNNumber == ""
? null
: shpmntItem.hazmatUNNumber,
displayOrder: this.displayOrder++,
crsPackageId: this.shmtModeCourier
? shpmntItem.packageName
: null,
};
if (this.editOrder) {
shpmntItemObj["quoteItemId"] = shpmntItem.quoteItemId;
}
shpmntItems.push(shpmntItemObj);
}

let ratesArr = [];

for (let rate of this.orderDetailForm.get("paymentDetails").value) {
console.log(rate, "ssjjs");
let rateObj = {};
let chargeName = "";
if (rate.isAutoChargeItem) {
chargeName = rate.autoChargeItem;
} else {
for (let charge of this.chargeList) {
if (charge.chargeId == rate.chargeItem) {
chargeName = charge.chargeName;
}
}
}
rateObj = {
chargeName: chargeName,
chargeCode: rate.chargeItem,
quantity: rate.quantity,
proBill: rate.probill,
isAc: rate.ac,
isPd: rate.pd,
isAfs: rate.afs,
taxGroup:
rate.taxGroup === "" || !this.allTaxListMap[rate.taxGroup]
? null
: this.allTaxListMap[rate.taxGroup].taxPercent,
totalCharge: rate.quantity * rate.price,
fscRate: rate.fuelCharge, //Fuel charge rate in popup
isFscRatePecent: rate.fuelType === "percentage" ? true : false, //
fuel charge is fixed or percent
// "isActive": true, // commented bcz it's not required or wrong flag
acc. to Ghulam
};
ratesArr.push(rateObj);
}

let allShipperAddrArr = [];

for (let shipperAddress of this.orderDetailForm.get("shippers")
.value) {
let shipperAddressObj = {};
shipperAddressObj = {
zipCode: shipperAddress.zipCode,
city: shipperAddress.city,
state: shipperAddress.state,
country: shipperAddress.country,
fullAddr: shipperAddress.fullAddr,
addrLine1: shipperAddress.addrLine1,
addrLine2: shipperAddress.addrLine2,
latitude: shipperAddress.latitude,
longitude: shipperAddress.longitude,
addrTypeId: shipperAddress.shipperAddrType,
extraServices: shipperAddress.extraServices,
pickupDeliveryType: shipperAddress.pickupDeliveryInfoId,
company: shipperAddress.company,
hopIndex: shipperAddress.hopIndex,
pickupDate:
shipperAddress.shipperPickupDate.year +
"-" +
shipperAddress.shipperPickupDate.month +
"-" +
shipperAddress.shipperPickupDate.day,
fromTime: shipperAddress.shipperPickupFromTime,
toTime: shipperAddress.shipperPickupToTime,
companyId: shipperAddress.companyId,
googleMapId: shipperAddress.googleMapId,
};
if (this.editOrder) {
shipperAddressObj["addressId"] = shipperAddress.addressId;
}

allShipperAddrArr.push(shipperAddressObj);

// if (shipperAddress.extraServices.length > 0) {
// this.hasSourceServicesOpted = true;
// }
}

let allConsigneeAddrArr = [];

for (let consigneeAddress of this.orderDetailForm.get("consignees")
.value) {
let consigneeAddressObj = {};
consigneeAddressObj = {
zipCode: consigneeAddress.zipCode,
city: consigneeAddress.city,
state: consigneeAddress.state,
country: consigneeAddress.country,
fullAddr: consigneeAddress.fullAddr,
addrLine1: consigneeAddress.addrLine1,
addrLine2: consigneeAddress.addrLine2,
latitude: consigneeAddress.latitude,
 longitude: consigneeAddress.longitude,
addrTypeId: consigneeAddress.consigneeAddrType,
extraServices: consigneeAddress.extraServices,
pickupDeliveryType: consigneeAddress.pickupDeliveryInfoId,
company: consigneeAddress.company,
hopIndex: consigneeAddress.hopIndex,
pickupDate:
consigneeAddress.consigneePickupDate.year +
"-" +
consigneeAddress.consigneePickupDate.month +
"-" +
consigneeAddress.consigneePickupDate.day,
fromTime: consigneeAddress.consigneePickupFromTime,
toTime: consigneeAddress.consigneePickupToTime,
companyId: consigneeAddress.companyId,
googleMapId: consigneeAddress.googleMapId,
};
if (this.editOrder) {
consigneeAddressObj["addressId"] = consigneeAddress.addressId;
}

allConsigneeAddrArr.push(consigneeAddressObj);

// if (consigneeAddress.extraServices.length > 0) {
// this.hasDestServicesOpted = true;
// }
}
sessionStorage.setItem(
"_admindestinationAddress",
JSON.stringify(allConsigneeAddrArr)
);
sessionStorage.setItem(
"_adminsourceAddress",
JSON.stringify(allShipperAddrArr)
);
let saveObj = {
customerId: this.selectedCustomerId,
customerBillingId: this.orderDetailForm.get("billTo").value,
customerCurrency:
this.orderDetailForm.get("additionalCurrency").value,
proBill: this.proBill,
callerName: this.orderDetailForm.get("callersName").value,
shipmentMode: this.selectedShmtModeId,
shpmtPackagingTypeId: this.selectedPkgTypeId,
hasSourceServicesOpted: this.hasSourceServicesOpted,
hasDestServicesOpted: this.hasDestServicesOpted,
sourceAddress: allShipperAddrArr,
destinationAddress: allConsigneeAddrArr,
items: shpmntItems,
rates: ratesArr,
poNumber: this.orderDetailForm.get("poNumber").value,
};

// let requestBody = {};

// let saveObj2;
// let probilListData = [];
// for (let probill in this.formDataBaisedonProbill) {
// if (this.formDataBaisedonProbill.hasOwnProperty(probill)) {
// let orderDetails = this.formDataBaisedonProbill[probill][0];
 // // requestBody[probill] = [orderDetails];

// console.log(orderDetails,"orderdetils")

// requestBody={
// "proBill":orderDetails.orderDetailForm.currentProbill,
// "callerName":orderDetails.orderDetailForm.callersName,
// "poNumber":orderDetails.orderDetailForm.poNumber,
// "shipmentMode":"cd6bdba2-e7ae-11e9-8462-163046d26cd4",
// "shpmtPackagingTypeId":"6963113f-0fa7-11ea-8462-
163046d26cd4",
// "pickupDelMode":"0",
// "sourceAddress": orderDetails.orderDetailForm.shippers,
// "destinationAddress":
orderDetails.orderDetailForm.consignees,
// "items": orderDetails.orderDetailForm.shipmentItem,
// };

// probilListData.push(requestBody)
// saveObj2={
// "customerId": this.selectedCustomerId,
// "customerBillingId":
this.orderDetailForm.get('billTo').value,
// "proBillList": probilListData,
// "rates":ratesArr

// }

// }
// }

let probilListData = [];

console.log(this.formDataBaisedonProbill, "formatDAA");
for (let probill in this.formDataBaisedonProbill) {
if (this.formDataBaisedonProbill.hasOwnProperty(probill)) {
let orderDetails = this.formDataBaisedonProbill[probill][0];

console.log(orderDetails, "orderDetails");

let consigneePickupDate = orderDetails.orderDetailForm

? orderDetails.orderDetailForm.consignees[0].consigneePickupDate
: orderDetails.destinationAddress.pickupDate;
let shipperPickupDate = orderDetails.orderDetailForm
? orderDetails.orderDetailForm.shippers[0].shipperPickupDate
: orderDetails.sourceAddress.pickupDate;

let formattedConsigneePickupDate = `${consigneePickupDate.year}-$

{consigneePickupDate.month}-${consigneePickupDate.day}`;
let formattedShipperPickupDate = `${shipperPickupDate.year}-$
{shipperPickupDate.month}-${shipperPickupDate.day}`;

let shpmntItems = [];

let orderdetailsShipmentData = orderDetails.orderDetailForm
? orderDetails.orderDetailForm.shipmentItem
: orderDetails.items;
for (let shpmntItem of orderdetailsShipmentData) {
let shpmntItemObj = {};
shpmntItemObj = {
 qty: shpmntItem.quantity,
totalWeight: shpmntItem.weight,
length: shpmntItem.length,
breadth: shpmntItem.width,
height: shpmntItem.height,
unit: this.measurementType == "metric" ? "cm" : "inch",
wghtUnit: this.measurementType == "metric" ? "kg" : "lbs",
packaging: this.shmtModeCourier
? null
: shpmntItem.packageName,
// "styleCode": 'boxed',
styleCode: this.selectedPkgStyleCode,
showFreight: true, // no idea - sent true directly in get quote
as well at line no. 443
freightClass:
this.shmtModeCourier == true
? null
: this.getfrieghtClassId(shpmntItem.class), //freightId
freightRange:
this.shmtModeCourier == true ? null : shpmntItem.class,
//freightCategory
lengthType: this.measurementType,
description: shpmntItem.description,
shipmentItemValue: shpmntItem.shipmentValue,
shipmentItemValueCurrency:
shpmntItem.shipmentValueCurrencyCode,
stackable: shpmntItem.stackable,
hazMat: shpmntItem.hazmat,
hazardClass:
shpmntItem.hazmatHazardClass == ""
? null
: shpmntItem.hazmatHazardClass,
unNumType:
shpmntItem.hazmatNU == "" ? null : shpmntItem.hazmatNU,
packageGroup:
shpmntItem.hazmatPackageGroup == ""
? null
: shpmntItem.hazmatPackageGroup,
hazardPackagingType:
shpmntItem.hazmatPackageType == ""
? null
: shpmntItem.hazmatPackageType,
properShippingName:
shpmntItem.hazmatShipperName == ""
? null
: shpmntItem.hazmatShipperName,
unNumber:
shpmntItem.hazmatUNNumber == ""
? null
: shpmntItem.hazmatUNNumber,
displayOrder: this.displayOrder++,
crsPackageId: this.shmtModeCourier
? shpmntItem.packageName
: null,
};

shpmntItems.push(shpmntItemObj);
}
let requestBody = {
proBill: orderDetails.orderDetailForm
? orderDetails.orderDetailForm.currentProbill
: orderDetails.proBill,
callerName: orderDetails.orderDetailForm
? orderDetails.orderDetailForm.callersName
: orderDetails.callerName,
customerCurrency:
this.orderDetailForm.get("additionalCurrency").value,
poNumber: orderDetails.orderDetailForm
? orderDetails.orderDetailForm.poNumber
: orderDetails.poNumber,

shipmentMode: orderDetails.shipmentMode
? orderDetails.shipmentMode
: orderDetails.selectedShmtModeId,
shpmtPackagingTypeId: orderDetails.shpmtPackagingTypeId
? orderDetails.shpmtPackagingTypeId
: orderDetails.selectedPkgTypeId,

pickupDelMode: orderDetails.pickupDelMode,
sourceAddress: orderDetails.sourceAddress
? orderDetails.sourceAddress
: {
...orderDetails.orderDetailForm.shippers[0],
pickupDate: formattedShipperPickupDate,
toTime:
orderDetails.orderDetailForm.shippers[0]
.shipperPickupToTime,
fromTime:
orderDetails.orderDetailForm.shippers[0]
.shipperPickupFromTime,
addrTypeId: orderDetails.orderDetailForm.shippers[0]
.shipperAddrType
? orderDetails.orderDetailForm.shippers[0]
.shipperAddrType
: null,
pickupDeliveryType:
orderDetails.orderDetailForm.shippers[0]
.pickupDeliveryInfoId,
// Assigning the formatted shipperPickupDate here
},
destinationAddress: orderDetails.destinationAddress
? orderDetails.destinationAddress
: {
...orderDetails.orderDetailForm.consignees[0],
pickupDate: formattedConsigneePickupDate,
toTime:
orderDetails.orderDetailForm.consignees[0]
.consigneePickupToTime,
fromTime:
orderDetails.orderDetailForm.consignees[0]
.consigneePickupFromTime,
addrTypeId: orderDetails.orderDetailForm.consignees[0]
.consigneeAddrType
? orderDetails.orderDetailForm.consignees[0]
.consigneeAddrType
: null,
pickupDeliveryType:
 orderDetails.orderDetailForm.consignees[0]
.pickupDeliveryInfoId,
},
items: shpmntItems,
};

probilListData.push(requestBody);
}
}

let saveObj2 = {
customerId: this.selectedCustomerId,
customerBillingId: this.orderDetailForm.get("billTo").value,
proBillList: probilListData,
rates: ratesArr,
};

if (this.editOrder && !this.shipAgain && !this.executing) {

let urlArr = window.location.href.split("/");
saveObj["orderId"] = this.step1DataLs
? this.step1DataLs.orderId
: this.activatedRoute.snapshot.paramMap.get("orderId");
saveObj["quoteId"] = this.step1DataLs
? this.step1DataLs.quoteId
: sessionStorage.getItem("_admineditOrderQuoteId");
}

const myheader = new HttpHeaders().set(

"Content-Type",
"application/json"
);
let url = ServerURLS.saveManualOrderDetails.action;
this.getGlobalFooterData();

this.httpClient
.post(url, saveObj2, {
withCredentials: true,
headers: myheader,
})
.subscribe(
(result: any) => {
if (result.manualOrderQuoteResponse.proQuoteRefList) {
localStorage.setItem(
"setpOneData",
JSON.stringify(result.manualOrderQuoteResponse)
);
}
this.closeModel();
let globalFooterData = {
mode: this.selectedShmtMode ? this.selectedShmtMode : "--",
pieceCount: this.totalOfQuantity
? this.totalOfQuantity
: "--",
linearFeet: {
totalLength: this.totalofLength ? this.totalofLength : "--",
totalWidth: this.totalofWidth ? this.totalofWidth : "--",
totalHeight: this.totalofHeight ? this.totalofHeight : "--",
},
totalWeight: this.totalOfWeight ? this.totalOfWeight : "--",
 class: this.totalClass ? this.totalClass : "--",
shipmentValue: this.totalofShipmentValue
? this.totalofShipmentValue
: "--",
};

let shippers = [];

for (let individualShipper of this.orderDetailForm.get(
"shippers"
).value) {
let singleShipperObj: any = {};
// singleShipperObj.shipperIndex = individualShipper.hopIndex;
if (individualShipper.googleMapId != "") {
singleShipperObj.selectedAddrGoogleManual = "google";
// singleShipperObj.addrDataObj =
this.selectedShipperGoogleAddrDataForStep1[individualShipper.hopIndex]; // call
handleAddressChange fn with this obj's data and hopIndex aka shipperIndex
} else {
singleShipperObj.selectedAddrGoogleManual = "manual";
// singleShipperObj.addrDataObj =
this.selectedShipperManualAddrDataForStep1[individualShipper.hopIndex]; // call
getCompanyDetails fn with this obj's data and hopIndex aka shipperIndex
}
// singleShipperObj.fullAddr = individualShipper.fullAddr;
// singleShipperObj.businessId =
this.selectedShipBusinessIdForStep1[individualShipper.hopIndex]; // call
setBusinessType fn with this businessId and hopIndex aka shipperIndex to get the
accessorials list for this particular shipper
// // singleShipperObj.shipperAddrType =
individualShipper.shipperAddrType;
// // singleShipperObj.shipperPickupDate =
individualShipper.shipperPickupDate; // shipperPickupDate is an Object with day,
month, and year.
// // singleShipperObj.shipperPickupFromTime =
individualShipper.shipperPickupFromTime;
// // singleShipperObj.shipperPickupToTime =
individualShipper.shipperPickupToTime;
singleShipperObj = individualShipper;
singleShipperObj.accessorialsData =
this.accessorialsData[individualShipper.hopIndex];

shippers.push(singleShipperObj);
}
let countryShipperString = "CA";
for (let shipper of shippers) {
if (shipper.country == "US") {
countryShipperString = "US";
}
}

let consignees = [];

for (let individualConsignee of this.orderDetailForm.get(
"consignees"
).value) {
let singleConsigneeObj: any = {};
// singleConsigneeObj.consigneeIndex =
individualConsignee.hopIndex;
if (individualConsignee.googleMapId != "") {
singleConsigneeObj.selectedAddrGoogleManual = "google";
 // singleConsigneeObj.addrDataObj =
this.selectedConsigneeGoogleAddrDataForStep1[individualConsignee.hopIndex]; // call
handleConsignee fn with this obj's data and hopIndex aka consigneeIndex
} else {
singleConsigneeObj.selectedAddrGoogleManual = "manual";
// singleConsigneeObj.addrDataObj =
this.selectedConsigneeManualAddrDataForStep1[individualConsignee.hopIndex]; // call
getCompanyDetails fn with this obj's data and hopIndex aka consigneeIndex
}
// singleConsigneeObj.fullAddr = individualConsignee.fullAddr;
// singleConsigneeObj.businessId =
this.selectedConBusinessIdForStep1[individualConsignee.hopIndex]; // call
setBusinessTypeInCon fn with this businessId and hopIndex aka consigneeIndex to get
the accessorials list for this particular consignee
// singleConsigneeObj.consigneeAddrType =
individualConsignee.consigneeAddrType;
// singleConsigneeObj.consigneePickupDate =
individualConsignee.consigneePickupDate;
// singleConsigneeObj.consigneePickupFromTime =
individualConsignee.consigneePickupFromTime;
// singleConsigneeObj.consigneePickupToTime =
individualConsignee.consigneePickupToTime;
singleConsigneeObj = individualConsignee;
singleConsigneeObj.accessorialsDataCon =
this.accessorialsDataCon[individualConsignee.hopIndex];

consignees.push(singleConsigneeObj);
}
let countryConsigneeString = "CA";
for (let consignee of consignees) {
if (consignee.country == "US") {
countryConsigneeString = "US";
}
}

let step1DataObj = {
// This object should contain data which needs to populate in
frontend as well as which needs to send in the payload.
orderId: result.orderId,
quoteId: result.quoteId,
selectedCustomerId: this.selectedCustomerId, //call
getCustomerDetailsbyId fn with this data
customerName: this.selectedCustomerName,
billTo: this.orderDetailForm.get("billTo").value, //call
selectBillTo fn with this data
primaryContact: this.primaryContact,
primaryPhone: this.primaryPhone,
primaryEmail: this.primaryEmail,
callersName: this.orderDetailForm.get("callersName").value,
poNumber: this.orderDetailForm.get("poNumber").value,
countryShipperString: countryShipperString,
countryConsigneeString: countryConsigneeString,

shmtMode: {
//call selectShmt fn with the below data
index: this.selectedShmtIndexForStep1,
shmtData: this.selectedShmtDataForStep1,
},
 pkgType: {
//call selectPkgType fn with the below data
index: this.selectedPkgIndexForStep1,
pkgData: this.selectedPkgDataForStep1,
},

shippers: shippers,
consignees: consignees,

shipmentItems: {
measurementType: this.measurementType,
shmntItemsArr:
this.orderDetailForm.get("shipmentItem").value,
// when set quantity, call calculateTotalQuantity('quantity')
fn
// when set weight, call getDensity fn with Array Index and
then calculateTotalQuantity('weight') fn
// when set width, call getDensity fn with Array Index and
then calculateTotalQuantity('width') fn
// when set length, call getDensity fn with Array Index and
then calculateTotalQuantity('length') fn
// when set height, call getDensity fn with Array Index and
then calculateTotalQuantity('height') fn
// when set shipmentValue, call
calculateTotalQuantity('shipmentValue') fn
// when set class, call customOptionsSelected('') fn with class
data
},

paymentDetails: {
paymentDetailsArr:
this.orderDetailForm.get("paymentDetails").value,
// when set chargeItem, call setChargeDesctiption fn with
chargeItem value and Array Index
// when set quantity, call
priceAndQuantityInput('','quantity','') fn with Array Index, quantity string and
quantity value
// when set price, call priceAndQuantityInput('','price','') fn
with Array Index, price string and price value
// when
},

additionalDetails: {
additionalCurrency:
this.orderDetailForm.get("additionalCurrency").value,
baseCharges: parseFloat(
this.orderDetailForm.get("baseCharges").value
).toFixed(2),
fscAmount: parseFloat(
this.orderDetailForm.get("fscAmount").value
).toFixed(2),
taxAmount: parseFloat(
this.orderDetailForm.get("taxAmount").value
).toFixed(2),
totalCharges: parseFloat(
this.orderDetailForm.get("totalCharges").value
).toFixed(2),
},
};
 sessionStorage.setItem(
"_adminnewOrderCustomerId",
this.selectedCustomerId
);
sessionStorage.setItem(
"_admincustomerBillingId",
this.orderDetailForm.get("billTo").value
);
sessionStorage.setItem(
"_adminnewOrderGlobalFooterData",
JSON.stringify(globalFooterData)
);
sessionStorage.setItem(
"_adminnewOrderShipmentModeId",
this.selectedShmtModeId
);
sessionStorage.setItem(
"_adminnewOrderQuoteId",
result.manualOrderQuoteResponse.proQuoteRefList[0].quoteId
);
localStorage.setItem(
"probillList",
JSON.stringify(
result.manualOrderQuoteResponse.proQuoteRefList
)
);

this.listDataService.removeAllOrderListData();

if (this.editOrder && !this.shipAgain && !this.executing) {

this._loaderService.stringSubject.next(false);
this.router.navigateByUrl(
"shipcarte/orders/newOrderEntry/editCarrierContract"
);
let urlArr = window.location.href.split("/");
sessionStorage.setItem(
"_adminnewOrderOrderId",
this.activatedRoute.snapshot.paramMap.get("orderId")
);
} else {
localStorage.setItem(
"_adminstep1Data",
JSON.stringify(step1DataObj)
);
this._loaderService.stringSubject.next(false);
this.router.navigateByUrl(
"/shipcarte/orders/newOrderEntry/carrierContract"
);
}
},
(error) => {
this._loaderService.stringSubject.next(false);
this.closeModel();
// this.toastr.error(error.error.message ? error.error.message :
error.error.Message ? error.error.Message : 'Something went wrong.', 'Oops',
{ timeOut: 10000 });
}
);
 } else {
this._loaderService.stringSubject.next(false);
this.closeModel();
this.toastr.error(
"First Consignee Date should be greater than or equals to the Last
Shipper Date",
"Oops",
{ timeOut: 10000 }
);
}
}
}
}
getGlobalFooterData() {
const footerData = {};
const insuranceData = {};
const probillData = this.formDataBaisedonProbill;

for (const key in probillData) {

if (probillData.hasOwnProperty(key)) {
const element = probillData[key];

const orderDetail =
(element[0] && element[0].orderDetailForm) ||
(element[1] && element[1].orderDetailForm) ||
{};

insuranceData[key] = {
key: key,
selectedShmtModeId:
(element[0] && element[0].selectedShmtModeId) ||
(element[1] && element[1].selectedShmtModeId) ||
null,
originSet:
orderDetail.shippers && orderDetail.shippers[0]
? orderDetail.shippers[0]
: null,
dstAddressArr:
orderDetail.consignees && orderDetail.consignees[0]
? orderDetail.consignees[0]
: null,
};

// Initialize variables
let pieceCount = 0;
let totalLength = 0;
let totalWidth = 0;
let totalHeight = 0;
let totalWeight = 0;
let classValue = 0;
let shipmentValue = 0;

// Calculate shipment item data

if (orderDetail.shipmentItem && orderDetail.shipmentItem.length) {
orderDetail.shipmentItem.forEach((el) => {
pieceCount += parseFloat(el.quantity) || 0;
totalLength += parseFloat(el.length) || 0;
totalWidth += parseFloat(el.width) || 0;
totalHeight += parseFloat(el.height) || 0;
 totalWeight += parseFloat(el.weight) || 0;
shipmentValue += parseFloat(el.shipmentValue) || 0;
classValue += parseFloat(el.class) || 0;
});
}

// Construct global footer data

footerData[key] = {
mode:
(element[0] &&
element[0].shpmntModePkgTypeData &&
element[0].shpmntModePkgTypeData[0] &&
element[0].shpmntModePkgTypeData[0].shippingMode) ||
"--",
pieceCount: pieceCount || "--",
linearFeet: {
totalLength: totalLength || "--",
totalWidth: totalWidth || "--",
totalHeight: totalHeight || "--",
},
totalWeight: totalWeight || "--",
class: classValue || "--",
shipmentValue: shipmentValue || "--",
};
}
}

// Store data in localStorage

localStorage.setItem("_admininsuranceData", JSON.stringify(insuranceData));
localStorage.setItem("footerdata", JSON.stringify(footerData));
}

isPercentage: boolean = false;

setApplyFuelSurchargeCode(value) {
if (value === "percentage") {
this.isPercentage = true;
} else {
this.isPercentage = false;
}
}
openFuelModelToAddFuelSurcharge(index, template) {
let value =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls.afs
.value;
if (value) {
this.openModelToFuelCharge(index, template);
} else {
this.orderDetailForm.get("paymentDetails")["controls"][
index
].controls.afs.value = false;
this.orderDetailForm.get("paymentDetails")["controls"][index].patchValue({
fuelType: "",
fuelCharge: "",
});
this.calculateTotolFuelSurchargeInPaymentDetials();

this.fuelChargeFrom.reset();
}
}
openModelToFuelCharge(index, template) {
this.isPercentage = false;
this.modalService
.open(template, {
size: "lg",
centered: true,
backdrop: true,
windowClass: "addFuelChargeClass",
})
.result.then(
(result) => {
if (this.fuelChargeFrom.invalid) {
this.fuelChargeFrom.markAllAsTouched();
this.openModelToFuelCharge(index, template);
} else {
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
fuelType: this.fuelChargeFrom.get("fuelType").value,
fuelCharge: this.fuelChargeFrom.get("fuelAmount").value,
});
this.calculateTotolFuelSurchargeInPaymentDetials();
this.fuelChargeFrom.reset();
}
},
(reason) => {
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
afs: false,
});
this.fuelChargeFrom.reset();
this.calculateTotolFuelSurchargeInPaymentDetials();
}
);
}
totalFSCAmount: any = 0;
calculateTotolFuelSurchargeInPaymentDetials() {
this.totalFSCAmount = 0;
this.orderDetailForm
.get("paymentDetails")
["controls"].forEach((value, index) => {
if (
value.controls.price.value > 0 &&
value.controls.price.value !== null &&
value.controls.price.value !== undefined
) {
if (value.controls.fuelType.value === "percentage") {
this.totalFSCAmount =
this.totalFSCAmount +
(parseFloat(value.controls.fuelCharge.value) *
(parseFloat(value.controls.price.value) *
parseFloat(value.controls.quantity.value))) /
100;
} else if (value.controls.fuelType.value === "fixed") {
this.totalFSCAmount =
this.totalFSCAmount + parseFloat(value.controls.fuelCharge.value);
}
}
 });

this.orderDetailForm
.get("fscAmount")
.patchValue(parseFloat(this.totalFSCAmount).toFixed(2));
this.calculateTotalChargeInPayment();
}
setValueInModelToEditFuelCharge(index, template) {
let fuelType =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.fuelType.value;
let fuelCharge =
this.orderDetailForm.get("paymentDetails")["controls"][index].controls
.fuelCharge.value;
this.fuelChargeFrom.patchValue({
fuelType: fuelType,
fuelAmount: fuelCharge,
});
this.openEditModelToEditFuelCharge(index, template);
}
openEditModelToEditFuelCharge(index, template) {
this.modelService
.open(template, {
size: "lg",
centered: true,
backdrop: true,
windowClass: "addFuelChargeClass",
})
.result.then(
(result) => {
if (this.fuelChargeFrom.invalid) {
this.fuelChargeFrom.markAllAsTouched();
this.openEditModelToEditFuelCharge(index, template);
} else {
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
fuelType: this.fuelChargeFrom.get("fuelType").value,
fuelCharge: this.fuelChargeFrom.get("fuelAmount").value,
});
this.calculateTotolFuelSurchargeInPaymentDetials();
this.fuelChargeFrom.reset();
}
},
(reason) => {
this.fuelChargeFrom.reset();
}
);
}
assignOrderTest() {}
populateStep1DataLs(step1DataLs) {
setTimeout(() => {
this.getCustomerDetailsbyId(step1DataLs.selectedCustomerId);
}, 1000);
setTimeout(() => {
this.selectBillTo(step1DataLs.billTo);
}, 3000);
this.primaryContact = step1DataLs.primaryContact;
this.primaryPhone = step1DataLs.primaryPhone;
this.primaryEmail = step1DataLs.primaryEmail;
this.countryShipperString = step1DataLs.countryShipperString;
this.countryConsigneeString = step1DataLs.countryConsigneeString;
this.orderDetailForm.patchValue({
searchCustomer: step1DataLs.customerName,
billTo: step1DataLs.billTo,
callersName: step1DataLs.callersName,
poNumber: step1DataLs.poNumber,
});

setTimeout(() => {
// this.openModel();
this.selectShmt(
step1DataLs.shmtMode.index,
step1DataLs.shmtMode.shmtData
);
}, 3000);
setTimeout(() => {
this.selectPkgType(
step1DataLs.pkgType.index,
step1DataLs.pkgType.pkgData,
true
);
}, 3000);

//set shipper data

step1DataLs.shippers.forEach((shipperObj, index) => {
if (index != 0 || index != "0") {
this.onAddMoreShipper(index);
}
if (shipperObj.googleMapId == "" || shipperObj.googleMapId == null) {
this.clickEventShipper(index);
this.checkshipperAddressBook(index);
this.isAddressBookShipper.push(index);
this.shipperToggleBoolean = true;

// this.isAddressBookShipper.push(index);
} else {
//set latitude and longitude for google map
this.shipperMarkers.push({
lat: shipperObj.latitude,
lng: shipperObj.longitude,
label: (index + 1).toString(),
index: index,
});
}
this.orderDetailForm.get("shippers")["controls"][index].patchValue({
hopIndex: shipperObj.hopIndex,
fullAddr: shipperObj.fullAddr,
zipCode: shipperObj.zipCode,
city: shipperObj.city,
state: shipperObj.state,
country: shipperObj.country,
addrLine1: shipperObj.addrLine1,
addrLine2: shipperObj.addrLine2,
latitude: shipperObj.latitude,
longitude: shipperObj.longitude,
extraServices: shipperObj.extraServices,
company: shipperObj.company,
 companyId: shipperObj.companyId,
shipperAddrType: shipperObj.shipperAddrType,
shipperPickupDate: shipperObj.shipperPickupDate,
shipperPickupFromTime: shipperObj.shipperPickupFromTime,
pickupDeliveryInfoId: shipperObj.pickupDeliveryInfoId,
shipperPickupToTime: shipperObj.shipperPickupToTime,
googleMapId: shipperObj.googleMapId,
});
setTimeout(() => {
this.setBusinessType(shipperObj.hopIndex, shipperObj.shipperAddrType);
}, 2000);
setTimeout(() => {
this.accessorialsData[shipperObj.hopIndex] =
shipperObj.accessorialsData;
}, 3000);
});

//set consignee data

step1DataLs.consignees.forEach((consigneeObj, index) => {
if (index != 0 || index != "0") {
this.onAddMoreConsignee(index);
}
if (consigneeObj.googleMapId == "" || consigneeObj.googleMapId == null) {
this.clickEventConsignee(index);
this.checkConsigneeAddressBook(index);
this.isAddressBookConsignee.push(index);
this.consigneeToggleBoolean = true;

// this.isAddressBookConsignee.push(index);
} else {
//set latitude and longitude for google map
this.consigneeMarkers.push({
lat: consigneeObj.latitude,
lng: consigneeObj.longitude,
label: (index + 1).toString(),
index: index,
});
}
this.orderDetailForm.get("consignees")["controls"][index].patchValue({
hopIndex: consigneeObj.hopIndex,
fullAddr: consigneeObj.fullAddr,
zipCode: consigneeObj.zipCode,
city: consigneeObj.city,
state: consigneeObj.state,
country: consigneeObj.country,
addrLine1: consigneeObj.addrLine1,
addrLine2: consigneeObj.addrLine2,
latitude: consigneeObj.latitude,
longitude: consigneeObj.longitude,
extraServices: consigneeObj.extraServices,
company: consigneeObj.company,
companyId: consigneeObj.companyId,
consigneeAddrType: consigneeObj.consigneeAddrType,
pickupDeliveryInfoId: consigneeObj.pickupDeliveryInfoId,
consigneePickupDate: consigneeObj.consigneePickupDate,
consigneePickupFromTime: consigneeObj.consigneePickupFromTime,
consigneePickupToTime: consigneeObj.consigneePickupToTime,
googleMapId: consigneeObj.googleMapId,
});
 setTimeout(() => {
this.setBusinessTypeInCon(
consigneeObj.hopIndex,
consigneeObj.consigneeAddrType
);
}, 2000);
setTimeout(() => {
this.accessorialsDataCon[consigneeObj.hopIndex] =
consigneeObj.accessorialsDataCon;

this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
}, 3000);
});
//set Shipment Item data
this.measurementType = step1DataLs.shipmentItems.measurementType;
step1DataLs.shipmentItems.shmntItemsArr.forEach((shmntItemObj, index) => {
if (index != 0 || index != "0") {
this.addLineShipmentItembyClick();
}
this.orderDetailForm.get("shipmentItem")["controls"][index].patchValue({
packageName: shmntItemObj.packageName,
quantity: shmntItemObj.quantity,
weight: shmntItemObj.weight,
width: shmntItemObj.width,
length: shmntItemObj.length,
height: shmntItemObj.height,
description: shmntItemObj.description,
shipmentValue: shmntItemObj.shipmentValue,
shipmentValueCurrencyCode: shmntItemObj.shipmentValueCurrencyCode,
class: shmntItemObj.class,
nmfc: shmntItemObj.nmfc,
stackable: shmntItemObj.stackable,
hazmat: shmntItemObj.hazmat,
hazmatNU: shmntItemObj.hazmatNU,
hazmatUNNumber: shmntItemObj.hazmatUNNumber,
hazmatShipperName: shmntItemObj.hazmatShipperName,
hazmatHazardClass: shmntItemObj.hazmatHazardClass,
hazmatPackageGroup: shmntItemObj.hazmatPackageGroup,
hazmatPackageType: shmntItemObj.hazmatPackageType,
});
});

//set Payment Details data

step1DataLs.paymentDetails.paymentDetailsArr.forEach(
(paymentRowObj, index) => {
if (index != 0 || index != "0") {
this.addLinePaymentDetailsByClick();
}
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
chargeItem: paymentRowObj.chargeItem,
probill: paymentRowObj.probill,
chargeDescription: paymentRowObj.chargeDescription,
quantity: paymentRowObj.quantity,
});
setTimeout(() => {
this.priceAndQuantityInput(index, "quantity", paymentRowObj.quantity);
}, 1000);
 this.orderDetailForm
.get("paymentDetails")
["controls"][index]["controls"].price.patchValue(paymentRowObj.price);
setTimeout(() => {
this.priceAndQuantityInput(index, "price", paymentRowObj.price);
}, 1000);
this.orderDetailForm
.get("paymentDetails")
["controls"][index].patchValue({
ac: paymentRowObj.ac,
pd: paymentRowObj.pd,
afs: paymentRowObj.afs,
fuelType: paymentRowObj.fuelType,
fuelCharge: paymentRowObj.fuelCharge,
taxGroup: paymentRowObj.taxGroup,
totalCharge: paymentRowObj.totalCharge,
newLine: paymentRowObj.newLine,
});
setTimeout(() => {
this.setChargeDesctiption(paymentRowObj.chargeItem, index);
}, 3000);
}
);

//set Additional Details data

this.orderDetailForm.patchValue({
additionalCurrency: step1DataLs.additionalDetails.additionalCurrency,
baseCharges: parseFloat(
step1DataLs.additionalDetails.baseCharges
).toFixed(2),
fscAmount: step1DataLs.additionalDetails.fscAmount,
taxAmount: step1DataLs.additionalDetails.taxAmount,
totalCharges: step1DataLs.additionalDetails.totalCharges,
});
}

deleteShipperConsignee(type: string, index: any, template) {

this.modelService
.open(template, {
centered: true,
backdrop: false,
windowClass: "confirmDeletePackageOuterDiv",
})
.result.then(
(result) => {
if (type == "shipper") {
(<FormArray>this.orderDetailForm.get("shippers")).removeAt(index);
this.shipperMarkers.splice(index, 1);
this.shipperMarkers.forEach((shipperMarker, index) => {
this.shipperMarkers[index].label = (index + 1).toString();
});
} else {
(<FormArray>this.orderDetailForm.get("consignees")).removeAt(index);
this.consigneeMarkers.splice(index, 1);
this.consigneeMarkers.splice(index, 1);
this.consigneeMarkers.forEach((consigneeMarker, index) => {
this.consigneeMarkers[index].label = (index + 1).toString();
});
}
this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
this.calculateOutBoundAndInBoundCharge();
},
(reason) => {
this.modelService.dismissAll();
}
);
}
unNumber: any;
packageGroupOptions = [
{ value: "na", label: "N/A" },
{ value: "i", label: "I" },
{ value: "ii", label: "II" },
{ value: "iii", label: "III" },
];

setHazmatDetails(data: any, i: number) {

const inputFieldsArray = this.orderDetailForm.get(
"shipmentItem"
) as FormArray;
const firstFieldGroup = inputFieldsArray.at(i) as FormGroup;

firstFieldGroup.patchValue({
hazmatShipperName: data.properShippingNames,
hazmatHazardClass: data.hazardClass,
hazmatPackageGroup: data.packageGroup,
});
}
handleInput(event: Event, i: number) {
const hazmatUnNumberControl = this.orderDetailForm.get(
`shipmentItem.${i}.hazmatUNNumber`
);

if (hazmatUnNumberControl) {
const hazmatUnNumberValue = hazmatUnNumberControl.value as string;

if (hazmatUnNumberValue.length === 4) {
this.getHazmatDetails(hazmatUnNumberValue, i);
}
}
}
getHazmatDetails(hazmatUnNumberValue: string, i: number) {
let url =
ServerURLS.getHazmatDetails.action + "?un_number=" + hazmatUnNumberValue;
let promise = this.scHttpService.getHttpService(url, "");
promise.then((result) => {
this.setHazmatDetails(result, i);
});
}
@HostListener("document:click", ["$event"]) onClick(e) {
if (!this.custoDropDown.nativeElement.contains(e.target)) {
this.shown = false;
}
}
getDisabled() {
// if (this.isCreditDisabled ) {
// this.popupMsg='Your credit has been disabled. Please contact the
administrator.'
 // this.isCraditExit=true;
// this.showPopup();
// } else if(this.orderDetailForm.get('additionalCurrency').value=='CAD' &&
parseFloat(this.orderDetailForm.get('totalCharges').value) >
parseFloat(this.availableCreditLimitInCAD)) {
// this.popupMsg='The credit limit is not enough to cover the total charge.'
// this.isCraditExit=true;
// this.showPopup();
// }else if(this.orderDetailForm.get('additionalCurrency').value=='USD' &&
parseFloat(this.orderDetailForm.get('totalCharges').value) >
parseFloat(this.availableCreditLimitInUSD)) {
// this.popupMsg='The credit limit is not enough to cover the total charge.'
// this.isCraditExit=true;
// this.showPopup();
// }else{
// this.popupMsg=''
// this.isCraditExit=false;
this.assignOrder();
// }
}
showPopup() {
if (this.isCraditExit) {
this.modalService
.open(this.confirmModal, {
size: "lg",
centered: true,
backdropClass: "light-blue-backdrop",
backdrop: "static",
windowClass: "my-custom-modal",
})
.result.then(
(result) => {
if (result == "Save click") {
}
},
(reason) => {}
);
}
}
consigneeAddr: any;
shipperAddr: any;
shipConsAdderss(customerId) {
let url2 =
ServerURLS.getShipperConsigneeAddress.action +
"?customerId=" +
customerId;
let promise2 = this.scHttpService.getHttpService(url2, "");
promise2
.then((data) => {
if (data) {
this.displayData = false;
this._loaderService.stringSubject.next(false);
this.shipperAddr = data["shipper_address"];
this.consigneeAddr = data["consignee_address"];
let obj = {
fullAddr: this.consigneeAddr.fullAddr,
zipCode: this.consigneeAddr.zipCode,
city: this.consigneeAddr.city,
state: this.consigneeAddr.state,
 country: this.consigneeAddr.country,
addrLine1: this.consigneeAddr.addrLine1,
addrLine2: this.consigneeAddr.addrLine2,
latitude: this.consigneeAddr.latitude,
longitude: this.consigneeAddr.longitude,
company: this.consigneeAddr.company,
googleMapId: this.consigneeAddr.googleMapId,
addressId: this.consigneeAddr.addressId,
};
let obj2 = {
fullAddr: this.shipperAddr.fullAddr,
zipCode: this.shipperAddr.zipCode,
city: this.shipperAddr.city,
state: this.shipperAddr.state,
country: this.shipperAddr.country,
addrLine1: this.shipperAddr.addrLine1,
addrLine2: this.shipperAddr.addrLine2,
latitude: this.shipperAddr.latitude,
longitude: this.shipperAddr.longitude,
company: this.shipperAddr.company,
googleMapId: this.shipperAddr.googleMapId,
addressId: this.shipperAddr.addressId,
};
setTimeout(() => {
this.orderDetailForm
.get("consignees")
["controls"][0].patchValue(obj);
this.orderDetailForm
.get("shippers")
["controls"][0].patchValue(obj2);

this.callTheProvinceTaxCalculationAPIInTheBasisOfShipperAndConsigneeAddress();
}, 2000);
}
})
.catch((error) => {
this.displayData = false;
this._loaderService.stringSubject.next(false);
});
}
showBillingPopup() {
this.modelService
.open(this.taxGrouppopup, {
size: "lg",
centered: true,
backdropClass: "light-blue-backdrop",
backdrop: "static",
windowClass: "my-custom-modal",
})
.result.then(
(result) => {
if (result == "Save click") {
}
},
(reason) => {}
);
}
changeDelivery() {
if (
 this.orderDetailForm.get("consignees")["controls"][0]["controls"]
.pickupDeliveryInfoId.value == "df639009-48be-11ef-9412-6045bd5f9a18"
) {
const value =
this.orderDetailForm.get("consignees")["controls"][0]["controls"]
.consigneePickupFromTime.value;
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.patchValue(value);
setTimeout(() => {
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.disable();
}, 500);
} else {
this.orderDetailForm
.get("consignees")
["controls"][0]["controls"].consigneePickupToTime.enable();
}
}
}
interface markerInterface {
lat: number;
lng: number;
label: string;
index: number;
}