Checkout Expand all
1. Enter Reseller Information
2. Enter Customer Information
3. Select Service / Shipping Address
Software (1)
Kaspersky |
||||
| Products | Quantity | Total (USD) | ||
| Kaspersky Internet Security | 34.50 |
|
34.50 | |
Bundle
Microsoft Surface Pro with Cloud Bundle |
||||
| Products | Quantity | Total (USD) | ||
| Microsoft 365 Basic | 60.90 |
|
60.90 | |
| Dropbox BUS STD-NEW 3-299 SEATS | 150.00 |
|
150.00 | |
Hardware (4)
Microsoft Surface Pro |
Payment Method: Credit Card  |
|||
| Products | Warehouse | Quantity | Total (USD) | |
| S.PRO 128GB M 4GB COMM |
|
1,979.80 |
|
5,939.40 |
Shipping Information
Bundle
Microsoft Surface Pro with Cloud Bundle |
Payment Method: Credit Card |
|||
| Products | Warehouse | Quantity | Total (USD) | |
| Microsoft Surface Pro Type Cover with... |
|
109.00 |
|
109.00 |
Shipping Information
HP 90W Slim AC Adapter |
||||
| Products | Warehouse | Quantity | Total (USD) | |
| HP 90W Slim AC Adapter |
|
82.23 |
|
82.23 |
Shipping Information
Cerberus Gaming Keyboard and Mouse |
||||
| Products | Warehouse | Quantity | Total (USD) | |
| HP 90W Slim AC Adapter |
|
82.23 |
|
82.23 |
Shipping Information
4. Select Payment Method
Your selected payment card has been expired. Please select another card.
Monthly Payments
Kaspersky
| Kaspersky Internet Security | 50.40 |
| Total | 150.80 |
Bundle
Microsoft Surface Pro with Cloud Bundle
| Microsoft 365 Basic | 60.90 |
| Dropbox BUS STD-NEW 3-299 SEATS | 150.00 |
| Total | 210.90 |
Payment Method:
Credit Card
Credit Card
One-Time Payment
Microsoft Surface Pro
| S.PRO 128GB M 4GB COMM | 5,939.40 |
| Freight | 56.23 |
| Total | 5,995.63 |
Payment Method:
Credit Card
Credit Card
| Microsoft Surface Pro Type Cover with... | 109.00 |
| Freight | 16.23 |
| Total | 122.23 |
Credit Cards
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
HP SMB Solution
| HP 90W Slim AC Adapter | 82.23 |
| Freight | 12.24 |
| Total | 94.47 |
Credit Cards
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
Cerberus Gaming Keyboard and Mouse
| Cerberus Gaming Keyboard and Mouse | 22.99 |
| Freight | 3.79 |
| Total | 26.78 |
Credit Cards
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
7759 6186 5454 4799
2752 9377 5017 0746
2589 2627 8276 3675
4062 3143 2637 3837
Add Cart
Net Payments Net 30 Net 60
Bundle
Microsoft Surface Pro with Cloud Bundle
| Microsoft Surface Pro | 1,350.90 |
| Freight | 16.23 |
| Total | 1,367.13 |
Payment Method:
Credit Card
Credit Card
5. XpressTrak Shipping Notification
Synnex XpressTrak Notification System
XpressTrak emails Order, Release, Shipping, Delivery and Proof of Delivery notifications in Reseller or End Customer format. Emails to your customers use this ‘From’ Address -orderstatus@xpresstrak.com - and the content will look like it is from your company. There is no limit to the number of notifications you can send.
Reseller Email (Inc Costs)
Email End Customer
<div class="col-xl-8 col-lg-12 section-container">
<h1 class="page-header">Checkout <a href="javascript:void(0);" class="expandAll"><i class="icon-expandall"></i><span class="txt">Expand all </span></a></h1>
<!--cart left section-->
<div class="left-section" id="checkoutAccordion">
<!--accordion start-->
<div class="accordion custom-accordion checkout-accordion">
<div class="card active">
<div class="card-header p-0" data-toggle="collapse" data-target="#checkout" aria-expanded="true" aria-controls="checkout">
<div class="card-heading mr-auto">
<h2>1. Enter Reseller Information <i class="icon-error-fill adrs-err"></i></h2>
</div>
<i class="icon-arrow-bottom" type="button" data-toggle="collapse" data-target="#checkout" aria-expanded="true" aria-controls="checkout"></i>
</div>
<div id="checkout" class="collapse show body" aria-labelledby="checkout" data-parent="#checkoutAccordion">
<!--card body start-->
<div class="card-body bg-none pt-4 reseller-contact">
<div class="row col-custom-padding">
<div class="col-md-12">
<div class="alert alert-danger poAlert" style="display: none;"><i></i><span class="alert-danger-msg">This PO number is invalid. Please enter valid PO number to continue. </span></div>
</div>
<div class="col-md-9 searchResellerDiv">
<div class="row col-custom-padding">
<div class="col-md-6 mb-3">
<label>Reseller Contact Name <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding search-reseller isReq" placeholder="John Appleseed">
</div>
</div>
<div class="col-md-6 ">
<label>Reseller Email ID</label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding search-reseller-email" placeholder="Enter Email">
</div>
</div>
<div class="col-md-6 mb-2">
<ul class="search-create-col">
<li class="ml-auto"><a href="#" class="tertiary-btn searchReseller" data-toggle="modal" data-target="#searchDirectoryModal" data-attr-flyout="searchDirectoryModal" data-attr-div="searchResellerDiv"><i class="icon-directory"></i> Search Directory </a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12 ">
<label>Reseller PO Number <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding reseller-po isReq" placeholder="Enter PO Number">
</div>
</div>
</div>
</div>
</div>
<input type="button" class="btn btn-primary float-right mt-3 useReseller" value="Next">
</div>
<!--card body end-->
</div>
</div>
</div>
<!--accordion end-->
<!--accordion start-->
<div class="accordion custom-accordion checkout-accordion" >
<div class="card">
<div class="card-header p-0 " data-toggle="collapse" data-target="#checkout1" aria-expanded="true" aria-controls="checkout1">
<div class="card-heading mr-auto">
<h2>2. Enter Customer Information <i class="icon-error-fill adrs-err"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#checkout1" aria-expanded="true" aria-controls="checkout1"></i>
</div>
<div id="checkout1" class="collapse body" aria-labelledby="checkout1" data-parent="#checkoutAccordion">
<!--card body start-->
<div class="card-body pt-4 customer-contact">
<div class="row col-custom-padding ">
<div class="col-md-8">
<label>Customer Name <span class="asterisk">*</span></label>
<div class="search-input-col mb-2">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding search-customer isReq" placeholder="John Appleseed">
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12 mb-2">
<label>Customer PO Number <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding cust-po isReq" placeholder="Enter PO Number">
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<ul class="search-create-col">
<li class="ml-auto"><a href="#" class="tertiary-btn searchCustomer" data-toggle="modal" data-target="#searchCustomerModal" data-attr-flyout="searchCustomerModal" data-attr-div="searchCustDiv"><i class="icon-directory"></i> Search Directory </a></li>
<li><a href="#" class="tertiary-btn showCustomer" data-toggle="modal" data-target="#createCustomerModal"><i class="icon-customer"></i> Create Customer </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row col-custom-padding">
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>Type</label>
<div class="search-input-col">
<div class="custom-dropdown address-custom-dropdown">
<i class="icon-arrow-bottom"></i>
<input type="text" aria-label="Search" class="form-control search-address ui-autocomplete-input" value="2GIT" autocomplete="off">
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<label>Business Name <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="DP Test LLC">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Street Address 1 <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="39 Pelham Ridge Dr">
</div>
</div>
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>City <span class="asterisk">*</span></label>
<div class="search-input-col">
<div class="custom-dropdown address-custom-dropdown">
<i class="icon-arrow-bottom"></i>
<input type="text" aria-label="Search" class="form-control search-address ui-autocomplete-input isReq" value="GREENVILLE" autocomplete="off">
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<label>State / Prov <span class="asterisk">*</span></label>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">SOUTH CAROLINA</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>SOUTH CAROLINA</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label> Address 2</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding" value="111-2A">
</div>
</div>
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>Postal / Zip Code <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="29615">
</div>
</div>
<div class="col-md-6 mb-2">
<label>Contact Full Name <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="David Parker">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row col-custom-padding">
<div class="col-md-6">
<label>Phone <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="+1 864-289-4234">
</div>
</div>
<div class="col-md-6">
<label>Email <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="david@synnex...">
</div>
</div>
</div>
</div>
</div>
<label class="accordion-lbl mt-3 mb-2">Reseller Contact Information</label>
<div class="row col-custom-padding">
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>RS Contact <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="DAVID PARKER">
</div>
</div>
<div class="col-md-6 mb-2">
<label>RS Country</label>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">USA</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>CANADA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>UK</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>AUSTRALIA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>CHINA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>CANADA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>CANADA</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>CANADA</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row col-custom-padding">
<div class="col-md-6">
<label>Phone <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="+1 864-289-4234">
</div>
</div>
<div class="col-md-6">
<label>Email <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" value="david@synnex...">
</div>
</div>
</div>
</div>
</div>
<label class="accordion-lbl mt-3 mb-2">Specific End Customer Product or Contract Information</label>
<div class="row col-custom-padding">
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>Watson Quote#</label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder=" ">
</div>
</div>
<div class="col-md-6 mb-2">
<label>RSPA#</label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder=" ">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>PO / BID#</label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder=" ">
</div>
</div>
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>Vandor Quote ID <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" placeholder=" ">
</div>
</div>
<div class="col-md-6 mb-2">
<label>Deal ID <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" placeholder=" ">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Estimate ID <span class="asterisk">*</span></label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding isReq" placeholder=" ">
</div>
</div>
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>DPAS Rating</label>
<div class="search-input-col">
<i class="icon-cross"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder=" ">
</div>
</div>
<div class="col-md-6 mb-2">
<label>New / Renew</label>
<div class="search-input-col">
<div class="custom-dropdown address-custom-dropdown">
<i class="icon-arrow-bottom"></i>
<input type="text" aria-label="Search" class="form-control search-address ui-autocomplete-input" value=" " autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<label class="accordion-lbl mt-3 mb-2">Comments</label>
<div class="row col-custom-padding">
<div class="col-md-8">
<div class="row col-custom-padding">
<div class="col-md-6 mb-2">
<label>Sales General</label>
<div class="search-input-col">
<textarea placeholder="add comment here..." class="form-control"></textarea>
</div>
</div>
<div class="col-md-6 mb-2">
<label>Shipping Label</label>
<div class="search-input-col">
<textarea placeholder="add comment here..." class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Packing Label</label>
<div class="search-input-col">
<textarea placeholder="add comment here..." class="form-control"></textarea>
</div>
</div>
</div>
<hr class="divide-line">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="warranty" name="example1">
<label class="custom-control-label" for="warranty">Warranty Automate</label>
</div>
<input type="button" class="btn btn-primary float-right mt-3 useCustomer" value="Next">
</div>
</div>
<!--card body end-->
</div>
</div>
<!--accordion end-->
<!--accordion start-->
<div class="accordion custom-accordion checkout-accordion adrs-accordion" >
<div class="card">
<div class="card-header p-0 " data-toggle="collapse" data-target="#checkout2" aria-expanded="true" aria-controls="checkout2">
<div class="card-heading mr-auto">
<h2>3. Select Service / Shipping Address <i class="icon-error-fill adrs-err"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#checkout2" aria-expanded="true" aria-controls="checkout2"></i>
</div>
<div id="checkout2" class="collapse body" aria-labelledby="checkout2" data-parent="#checkoutAccordion">
<!--card body start-->
<div class="card-body pt-4">
<div class="row">
<div class="col-md-12 adrs-alerts">
<div class="alert alert-danger single" style="display: none;"><i></i><span class="alert-danger-msg">The specified service already exists for the customer. Please go to Subscription <br>Management and choose the Contract Number <span class="text-blue">1052108</span> to edit/add more service line(s). </span><span class="review-service-link"><span class="link">Review Service Line</span></span></div>
<div class="alert alert-danger single-change" style="display: none;"><i></i><span class="alert-danger-msg">The following services already exist for the selected customer, please got to Subscription Management, choose the contract number <span class="text-blue"> 1052108</span>, click Edit at the service Line(s) and Click “Add Qty”. </span><span class="review-service-link"><span class="link">Review Service Line</span></span></div>
<div class="alert alert-danger multiple" style="display: none;"><i></i><span class="alert-danger-msg">Errors on this section (2) </span><span class="review-service-link"><span class="link">Review Service Line</span> </span>
<ul>
<li>“Azure Active Directory Premium P1 | AD&P” already exists for the customer. Please go to Subscription Management and choose the Contract Number <span class="text-blue">1052108</span> to edit/add more service line(s). </li>
<li>“Azure Active Directory Premium P2 | AD&P” already exists for the customer. Please go to Subscription Management and choose the Contract Number <span class="text-blue">1074093</span> to edit/add more service line(s). </li>
</ul>
</div>
<div class="alert alert-danger multiple-change" style="display: none;"><i></i><span class="alert-danger-msg">Errors on this section (2) </span><span class="review-service-link"><span class="link">Review Service Line</span></span>
<ul>
<li>The following services already exist for the selected customer, please got to Subscription Management, choose the contract number <span class="text-blue">1052108</span>, click Edit at the service Line(s) and Click “Add Qty”. </li>
<li>The following services already exist for the selected customer, please got to Subscription Management, choose the contract number <span class="text-blue">1074093</span>, click Edit at the service Line(s) and Click “Add Qty”. </li>
</ul>
</div>
</div>
</div>
<div class="row col-custom-padding toggle-box">
<div class="col-md-12">
<h6><strong>Software (1)</strong></h6>
<table class="table accordion-table-data mt-3">
<tbody>
<tr class="table-first-row">
<td colspan="5">
<img src="images/kaspersky-icon.png">
<h3 class="card-body-head">Kaspersky</h3>
</td>
</tr>
<tr class="table-heading">
<td style="width: 33%;">Products</td>
<td style="width: 27%;"></td>
<td style="width: 15%;"></td>
<td style="width: 15%;" class="text-center">Quantity</td>
<td style="width: 10%;" class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr class="add-location-tr">
<td><span class="prod-name">Kaspersky Internet Security</span></td>
<td></td>
<td class="text-right"><span class="redTxt line-through" style="display: none;">38.80</span> <span class="priceValue">34.50<i class="icon-multiply"></i></span></td>
<td class="text-center">
<div class="search-input-col quantity-input">
<div class="quantity">
<input type="number" value="1" class="form-control" readonly="">
</div>
</div>
</td>
<td class="text-right"><span class="totalAmount">34.50</span></td>
</tr>
</tbody>
</table>
<hr class="divide-line">
<table class="table accordion-table-data mt-3">
<tbody>
<tr class="table-first-row">
<td colspan="5">
<span class="bundle-lbl">Bundle</span>
<h3 class="card-body-head">Microsoft Surface Pro with Cloud Bundle</h3>
</td>
</tr>
<tr class="table-heading">
<td style="width: 33%;">Products</td>
<td style="width: 27%;"></td>
<td style="width: 15%;"></td>
<td style="width: 15%;" class="text-center">Quantity</td>
<td style="width: 10%;" class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr class="add-location-tr">
<td><span class="prod-name">Microsoft 365 Basic</span></td>
<td></td>
<td class="text-right"><span class="redTxt line-through" style="display: none;">38.80</span> <span class="priceValue">60.90<i class="icon-multiply"></i></span></td>
<td class="text-center">
<div class="search-input-col quantity-input">
<div class="quantity">
<input type="number" value="1" class="form-control" readonly="">
</div>
</div>
</td>
<td class="text-right"><span class="totalAmount">60.90</span></td>
</tr>
<tr class="add-location-tr">
<td><span class="prod-name">Dropbox BUS STD-NEW 3-299 SEATS</span></td>
<td></td>
<td class="text-right"><span class="redTxt line-through" style="display: none;">38.80</span> <span class="priceValue">150.00<i class="icon-multiply"></i></span></td>
<td class="text-center">
<div class="search-input-col quantity-input">
<div class="quantity">
<input type="number" value="1" class="form-control" readonly="">
</div>
</div>
</td>
<td class="text-right"><span class="totalAmount">150.00</span></td>
</tr>
</tbody>
</table>
<hr class="divide-line">
</div>
<div class="col-md-12 mt-2">
<h6><strong>Hardware (4)</strong></h6>
<table class="table accordion-table-data addressTbl mt-3">
<tbody>
<tr class="table-first-row">
<td colspan="1">
<img src="images/microsoft.png">
<h3 class="card-body-head">Microsoft Surface Pro</h3>
</td>
<td colspan="4" class="text-right payment-methods"><div class="payment-method-info float-right"><span class="payment-text">Payment Method:</span> <span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div></td>
</tr>
<tr class="table-heading">
<td>
Products
</td>
<td>Warehouse</td>
<td></td>
<td class="text-center">Quantity</td>
<td class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr>
<td style="width: 33%;"><span class="prod-name">S.PRO 128GB M 4GB COMM</span> <span class="msp-prod isMsp" style="display: none;">MSP</span><i class="icon-error-fill ml-2" style="display: none;"></i></td>
<td style="width: 27%;" class="text-center">
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Columbus (3)</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Warehouse</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td style="width: 15%;" class="text-right"><span class="priceValue">1,979.80<i class="icon-multiply"></i></span></td>
<td style="width: 15%;" class="text-center">
<div class="search-input-col quantity-input ">
<div class="quantity ">
<input type="number" value="10" class="form-control" readonly>
</div>
</div>
</td>
<td style="width: 10%;" class="text-right"><span class="totalAmount">5,939.40</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 addons-head">
<h1 class="toggleAddOn"><span><i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="Collapse"></i> Shipping Information</span></h1>
</div>
<div class="col-md-12 addOnTable">
<div class="row col-custom-padding">
<div class="col-md-8 col-lg-9 col-xl-9">
<div class="shipping-method">
<h6>Shipping Method</h6>
<div class="method-opt shipMethod">
<div class="custom-control custom-radio mr-2">
<input type="radio" class="custom-control-input" id="default2" name="example11" checked value="default">
<label class="custom-control-label" for="default2">Default Method</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="default1" name="example11" value="carrier">
<label class="custom-control-label" for="default1">My Carrier Account Number</label>
</div>
</div>
<div class="ship-col">
<div class="ship-section">
<label>Ship To</label>
<div class="search-input-col">
<input type="text" placeholder="Zip code" class="form-control validateFreight" >
</div>
</div>
<div class="account-num" style="display: none;">
<label>Account Number</label>
<div class="search-input-col">
<input type="text" placeholder="Enter account Number" class="form-control validateFreight" >
</div>
</div>
<input type="button" value="Estimate Freight" class="btn btn-outline disabled calcFreight">
</div>
<div class="row col-custom-padding mt-2 freightData" style="display: none;">
<div class="col-md-3 delivery-time">
<label>Preferred Delivery Time</label>
<div class="custom-dropdown dropdown cards-custom-dropdown ">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">3 Days</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0);"><span>1 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>8 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>9 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>10 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>11 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>12 Days</span></a>
</div>
</div>
</div>
<div class="col-md-9 ">
<table class="table method-table m-0 scroll">
<thead>
<tr>
<th width="50%">Shipping Method Type</th>
<th width="18%">Cut Off</th>
<th width="32%" class="text-right">Estimate Freight (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio" name="table-sel">
<label class="custom-control-label" for="table-radio">UPS 3 Day</label>
</div>
</td>
<td>15:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio1" name="table-sel">
<label class="custom-control-label" for="table-radio1">UPS MAIL INNOV BOX >1 LB</label>
</div>
</td>
<td>17:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio2" name="table-sel">
<label class="custom-control-label" for="table-radio2">UPS Next Day Air</label>
</div>
</td>
<td>17:30</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio3" name="table-sel">
<label class="custom-control-label" for="table-radio3">UPS Surepost - >2 LB</label>
</div>
</td>
<td>11:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glove-divide freightData" style="display: none;"></div>
<div class="glove-service freightData" style="display: none;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="glove-service1" name="glove1">
<label class="custom-control-label" for="glove-service1">Add White Glove Service </label>
</div><i class="icon-info-blue ml-2"></i>
<div class="grove-usd ml-auto">18.40</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 shippingInfo">
<div class="shipping-col default">
<h1>Shipping Address <a href="javascript:void(0);" data-toggle="modal" data-target="#changeShippingModal" class="changeAddress" data-attr-flyout='changeShippingModal'>Change</a></h1>
<div class="ship-name">Anna Dealca</div>
<div class="location">
<i class="icon-customer-location"></i><span>8502 Preston Rd. Inglewood, Maine 98380</span>
</div>
<hr class="divide-line my-2">
<h1>Contact <a href="javascript:void(0);" class="changeContact">Change</a></h1>
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
<div class="shipping-col contactList" style="display: none;">
<div class="prev-close-col">
<a href="javascript:void(0);" class="goPrevList"><i class="icon-left-arrow"></i></a>
<a href="javascript:void(0);" class="closeList"><i class="icon-cross"></i></a>
</div>
<ul class="contact-listing">
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-1" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-1"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-2" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-2"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-3" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-3"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>kris@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-4" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-4"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divide-line">
<div class="col-md-12">
<table class="table accordion-table-data addressTbl">
<tbody>
<tr class="table-first-row">
<td colspan="2">
<span class="bundle-lbl">Bundle</span>
<h3 class="card-body-head">Microsoft Surface Pro with Cloud Bundle</h3>
</td>
<td colspan="3" class="text-right payment-methods"><div class="payment-method-info float-right"><span class="payment-text">Payment Method:</span> <span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div></td>
</tr>
<tr class="table-heading">
<td>
Products
</td>
<td>Warehouse</td>
<td></td>
<td class="text-center">Quantity</td>
<td class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr>
<td style="width: 33%;"><span class="prod-name">Microsoft Surface Pro Type Cover with...</span>
<i class="icon-error-fill ml-2 scrollToErr" style="display: none;"></i></td>
<i class="icon-error-fill ml-2 " style="display: none;"></i></td>
<td style="width: 27%;" class="text-center">
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Columbus (3)</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Warehouse</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td style="width: 15%;" class="text-right"><span class="priceValue">109.00<i class="icon-multiply"></i></span></td>
<td style="width: 15%;" class="text-center">
<div class="search-input-col quantity-input ">
<div class="quantity ">
<input type="number" value="1" class="form-control" readonly>
</div>
</div>
</td>
<td style="width: 10%;" class="text-right"><span class="totalAmount">109.00</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 addons-head">
<h1 class="toggleAddOn"><span><i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="Collapse"></i> Shipping Information</span></h1>
</div>
<div class="col-md-12 addOnTable">
<div class="row col-custom-padding">
<div class="col-md-9">
<div class="shipping-method">
<h6>Shipping Method</h6>
<div class="method-opt shipMethod">
<div class="custom-control custom-radio mr-2">
<input type="radio" class="custom-control-input" id="default3" name="example2" checked value="default">
<label class="custom-control-label" for="default3">Default Method</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="default4" name="example2" value="carrier">
<label class="custom-control-label" for="default4">My Carrier Account Number</label>
</div>
</div>
<div class="ship-col">
<div class="ship-section">
<label>Ship To</label>
<div class="search-input-col">
<input type="text" placeholder="Zip code" class="form-control validateFreightMicrososft" >
</div>
</div>
<div class="account-num" style="display: none;">
<label>Account Number</label>
<div class="search-input-col">
<input type="text" placeholder="Enter account Number" class="form-control validateFreightMicrososft" >
</div>
</div>
<input type="button" value="Estimate Freight" class="btn btn-outline disabled calcFreightMicrosoft">
</div>
<div class="row col-custom-padding mt-2 freightData" style="display: none;">
<div class="col-md-3 delivery-time">
<label>Preferred Delivery Time</label>
<div class="custom-dropdown dropdown cards-custom-dropdown ">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">3 Days</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0);"><span>1 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>8 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>9 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>10 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>11 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>12 Days</span></a>
</div>
</div>
</div>
<div class="col-md-9">
<table class="table method-table m-0 scroll">
<thead>
<tr>
<th width="50%">Shipping Method Type</th>
<th width="18%">Cut Off</th>
<th width="32%" class="text-right">Estimate Freight (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio" name="table-sel">
<label class="custom-control-label" for="table-radio">UPS 3 Day</label>
</div>
</td>
<td>15:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio1" name="table-sel">
<label class="custom-control-label" for="table-radio1">UPS MAIL INNOV BOX >1 LB</label>
</div>
</td>
<td>17:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio2" name="table-sel">
<label class="custom-control-label" for="table-radio2">UPS Next Day Air</label>
</div>
</td>
<td>17:30</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio3" name="table-sel">
<label class="custom-control-label" for="table-radio3">UPS Surepost - >2 LB</label>
</div>
</td>
<td>11:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glove-divide freightData" style="display: none;"></div>
<div class="glove-service freightData" style="display: none;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="glove-service1" name="glove1">
<label class="custom-control-label" for="glove-service1">Add White Glove Service </label>
</div><i class="icon-info-blue ml-2"></i>
<div class="grove-usd ml-auto">18.40</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 shippingInfo">
<div class="shipping-col default">
<h1>Shipping Address <a href="javascript:void(0);" data-toggle="modal" data-target="#changeShippingModal" class="changeAddress" data-attr-flyout='changeShippingModal'>Change</a></h1>
<div class="ship-name">Anna Dealca</div>
<div class="location">
<i class="icon-customer-location"></i><span>8502 Preston Rd. Inglewood, Maine 98380</span>
</div>
<hr class="divide-line my-2">
<h1>Contact <a href="javascript:void(0);" class="changeContact">Change</a></h1>
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
<div class="shipping-col contactList" style="display: none;">
<div class="prev-close-col">
<a href="javascript:void(0);" class="goPrevList"><i class="icon-left-arrow"></i></a>
<a href="javascript:void(0);" class="closeList"><i class="icon-cross"></i></a>
</div>
<ul class="contact-listing">
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-1" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-1"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-2" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-2"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-3" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-3"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>kris@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-4" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-4"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divide-line">
<div class="col-md-12">
<table class="table accordion-table-data addressTbl">
<tbody>
<tr class="table-first-row">
<td colspan="1">
<img src="images/hp-icon.png">
<h3 class="card-body-head">HP 90W Slim AC Adapter</h3>
</td>
<td colspan="4" class="text-right payment-methods" style="display: none;"><div class="payment-method-info float-right"><span class="payment-text">Payment Method:</span> <span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div></td>
</tr>
<tr class="table-heading">
<td>
Products
</td>
<td>Warehouse</td>
<td></td>
<td class="text-center">Quantity</td>
<td class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr>
<td style="width: 33%;"><span class="prod-name">HP 90W Slim AC Adapter</span></td>
<td style="width: 27%;" class="text-center">
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Columbus (3)</span>
</button>
<div class="dropdown-menu active-menu">
<div class="warehouse-list">
<a class="dropdown-item " href="javascript:void(0);"><span>Warehouse</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Columbus (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Miami, FL (DFL) (4)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Monroe, NJ (DNJ) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Romeoville, IL (DCH) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Garland, TX (DDA) (0)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTN) (2)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Southaven, MS (DTNL) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Tracy, CA (DFR) (3)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Chino, CA (DON) (6)</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Vendor Direct Ship (DDS) (3)</span></a>
</div>
</div>
</div>
</div>
</td>
<td style="width: 15%;" class="text-right"><span class="priceValue">82.23<i class="icon-multiply"></i></span></td>
<td style="width: 15%;" class="text-center">
<div class="search-input-col quantity-input ">
<div class="quantity ">
<input type="number" value="10" class="form-control" readonly="">
</div>
</div>
</td>
<td style="width: 10%;" class="text-right"><span class="totalAmount">82.23</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 addons-head">
<h1 class="toggleAddOn"><span><i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Collapse"></i> Shipping Information</span></h1>
</div>
<div class="col-md-12 addOnTable">
<div class="row col-custom-padding">
<div class="col-md-9">
<div class="shipping-method">
<h6>Shipping Method</h6>
<div class="method-opt shipMethod">
<div class="custom-control custom-radio mr-2">
<input type="radio" class="custom-control-input" id="default5" name="example3" checked value="default">
<label class="custom-control-label" for="default5">Default Method</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="default6" name="example3" value="carrier">
<label class="custom-control-label" for="default6">My Carrier Account Number</label>
</div>
</div>
<div class="ship-col">
<div class="ship-section">
<label>Ship To</label>
<div class="search-input-col">
<input type="text" placeholder="Zip code" class="form-control validateFreightHp">
</div>
</div>
<div class="account-num" style="display: none;">
<label>Account Number</label>
<div class="search-input-col">
<input type="text" placeholder="Enter account Number" class="form-control validateFreightHp">
</div>
</div>
<input type="button" value="Estimate Freight" class="btn btn-outline disabled calcFreightHp">
</div>
<div class="row col-custom-padding mt-2 freightData " style="display: none;">
<div class="col-md-3 delivery-time">
<label>Preferred Delivery Time</label>
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">3 Days</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0);"><span>1 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>8 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>9 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>10 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>11 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>12 Days</span></a>
</div>
</div>
</div>
<div class="col-md-9">
<table class="table method-table m-0 scroll">
<thead>
<tr>
<th width="50%">Shipping Method Type</th>
<th width="18%">Cut Off</th>
<th width="32%" class="text-right">Estimate Freight (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio" name="table-sel">
<label class="custom-control-label" for="table-radio">UPS 3 Day</label>
</div>
</td>
<td>15:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio1" name="table-sel">
<label class="custom-control-label" for="table-radio1">UPS MAIL INNOV BOX >1 LB</label>
</div>
</td>
<td>17:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio2" name="table-sel">
<label class="custom-control-label" for="table-radio2">UPS Next Day Air</label>
</div>
</td>
<td>17:30</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio3" name="table-sel">
<label class="custom-control-label" for="table-radio3">UPS Surepost - >2 LB</label>
</div>
</td>
<td>11:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glove-divide freightData" style="display: none;"></div>
<div class="glove-service freightData" style="display: none;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="glove-service1" name="glove1">
<label class="custom-control-label" for="glove-service1">Add White Glove Service </label>
</div><i class="icon-info-blue ml-2"></i>
<div class="grove-usd ml-auto">18.40</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 shippingInfo">
<div class="shipping-col default">
<h1>Shipping Address <a href="javascript:void(0);" data-toggle="modal" data-target="#changeShippingModal" class="changeAddress" data-attr-flyout='changeShippingModal'>Change</a></h1>
<div class="ship-name">Anna Dealca</div>
<div class="location">
<i class="icon-customer-location"></i><span>8502 Preston Rd. Inglewood, Maine 98380</span>
</div>
<hr class="divide-line my-2">
<h1>Contact <a href="javascript:void(0);" class="changeContact">Change</a></h1>
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
<div class="shipping-col contactList" style="display: none;">
<div class="prev-close-col">
<a href="javascript:void(0);" class="goPrevList"><i class="icon-left-arrow"></i></a>
<a href="javascript:void(0);" class="closeList"><i class="icon-cross"></i></a>
</div>
<ul class="contact-listing">
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-1" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-1"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-2" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-2"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-3" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-3"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>kris@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-4" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-4"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divide-line">
<div class="col-md-12">
<table class="table accordion-table-data addressTbl">
<tbody>
<tr class="table-first-row">
<td colspan="5">
<img src="images/asus-icon.png">
<h3 class="card-body-head">Cerberus Gaming Keyboard and Mouse</h3>
</td>
</tr>
<tr class="table-heading">
<td>
Products
</td>
<td>Warehouse</td>
<td></td>
<td class="text-center">Quantity</td>
<td class="text-right"><span class="totaltxt-heading total-right">Total (USD)</span></td>
</tr>
<tr>
<td style="width: 33%;"><span class="prod-name">HP 90W Slim AC Adapter</span></td>
<td style="width: 27%;" class="text-center">
<div class="search-input-col">
<div class="custom-dropdown address-custom-dropdown">
<i class="icon-arrow-bottom"></i>
<input type="text" aria-label="Search" class="form-control search-address ui-autocomplete-input" value="Columbus (3)" autocomplete="off">
</div>
</div>
</td>
<td style="width: 15%;" class="text-right"><span class="priceValue">82.23<i class="icon-multiply"></i></span></td>
<td style="width: 15%;" class="text-center">
<div class="search-input-col quantity-input ">
<div class="quantity ">
<input type="number" value="10" class="form-control" readonly="">
</div>
</div>
</td>
<td style="width: 10%;" class="text-right"><span class="totalAmount">82.23</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 addons-head">
<h1 class="toggleAddOn"><span><i class="icon-arrow-bottom" data-toggle="tooltip" data-placement="top" title="" data-original-title="Collapse"></i> Shipping Information</span></h1>
</div>
<div class="col-md-12 addOnTable">
<div class="row col-custom-padding">
<div class="col-md-9">
<div class="shipping-method">
<h6>Shipping Method</h6>
<div class="method-opt shipMethod">
<div class="custom-control custom-radio mr-2">
<input type="radio" class="custom-control-input" id="default7" name="example4" checked value="default">
<label class="custom-control-label" for="default7">Default Method</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="default8" name="example4" value="carrier">
<label class="custom-control-label" for="default8">My Carrier Account Number</label>
</div>
</div>
<div class="ship-col">
<div class="ship-section">
<label>Ship To</label>
<div class="search-input-col">
<input type="text" placeholder="Zip code" class="form-control validateFreightCer">
</div>
</div>
<div class="account-num" style="display: none;">
<label>Account Number</label>
<div class="search-input-col">
<input type="text" placeholder="Enter account Number" class="form-control validateFreightCer">
</div>
</div>
<input type="button" value="Estimate Freight" class="btn btn-outline disabled calcFreightCer">
</div>
<div class="row col-custom-padding mt-2 freightData" style="display: none;">
<div class="col-md-3 delivery-time">
<label>Preferred Delivery Time</label>
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">3 Days</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item " href="javascript:void(0);"><span>1 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>8 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>9 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>10 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>11 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>12 Days</span></a>
</div>
</div>
</div>
<div class="col-md-9">
<table class="table method-table m-0 scroll">
<thead>
<tr>
<th width="50%">Shipping Method Type</th>
<th width="18%">Cut Off</th>
<th width="32%" class="text-right">Estimate Freight (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio" name="table-sel">
<label class="custom-control-label" for="table-radio">UPS 3 Day</label>
</div>
</td>
<td>15:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio1" name="table-sel">
<label class="custom-control-label" for="table-radio1">UPS MAIL INNOV BOX >1 LB</label>
</div>
</td>
<td>17:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio2" name="table-sel">
<label class="custom-control-label" for="table-radio2">UPS Next Day Air</label>
</div>
</td>
<td>17:30</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="table-radio3" name="table-sel">
<label class="custom-control-label" for="table-radio3">UPS Surepost - >2 LB</label>
</div>
</td>
<td>11:00</td>
<td class="text-right"><span class="totalAmount">13.21</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glove-divide freightData" style="display: none;"></div>
<div class="glove-service freightData" style="display: none;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="glove-service1" name="glove1">
<label class="custom-control-label" for="glove-service1">Add White Glove Service </label>
</div><i class="icon-info-blue ml-2"></i>
<div class="grove-usd ml-auto">18.40</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 shippingInfo">
<div class="shipping-col default">
<h1>Shipping Address <a href="javascript:void(0);" data-toggle="modal" data-target="#changeShippingModal" class="changeAddress" data-attr-flyout='changeShippingModal'>Change</a></h1>
<div class="ship-name">Anna Dealca</div>
<div class="location">
<i class="icon-customer-location"></i><span>8502 Preston Rd. Inglewood, Maine 98380</span>
</div>
<hr class="divide-line my-2">
<h1>Contact <a href="javascript:void(0);" class="changeContact"> Change</a></h1>
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
<div class="shipping-col contactList" style="display: none;">
<div class="prev-close-col">
<a href="javascript:void(0);" class="goPrevList"><i class="icon-left-arrow"></i></a>
<a href="javascript:void(0);" class="closeList"><i class="icon-cross"></i></a>
</div>
<ul class="contact-listing">
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-1" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-1"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>annad@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-2" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-2"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-3" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-3"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>kris@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
<li>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="ph-4" name="example1" checked="" value="default">
<label class="custom-control-label" for="ph-4"></label>
</div>
<div class="mail-ph-col pb-1">
<div class="ship-mail mb-1"><i class="icon-customer-email"></i>mariah@synnex.com</div>
<div class="ship-phone"><i class="icon-customer-phone"></i>(864)349-4357</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divide-line">
</div>
<div class="btn-w-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="shiptime1" name="shiptime1">
<label class="custom-control-label" for="shiptime1">Ship at the same time when all are available</label>
</div>
<input type="button" class="btn btn-primary ml-auto useAddress" value="Next">
</div>
<div class="clearfix"></div>
</div>
<!--card body end-->
</div>
</div>
</div>
<!--accordion end-->
<!--accordion start-->
<div class="accordion custom-accordion checkout-accordion payment-accordion">
<div class="card">
<div class="card-header p-0 " data-toggle="collapse" data-target="#checkout3" aria-expanded="true" aria-controls="checkout3">
<div class="card-heading mr-auto">
<h2>4. Select Payment Method <i class="icon-error-fill payment-err"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed " type="button" data-toggle="collapse" data-target="#checkout3" aria-expanded="true" aria-controls="checkout3"></i>
</div>
<div id="checkout3" class="collapse body" aria-labelledby="checkout3" data-parent="#checkoutAccordion">
<!--card error style-->
<div class="card-error-msg inlineCardErr"><i class="icon-error-fill"></i> Your selected payment card has been expired. Please select another card.</div>
<!--card error style-->
<div class="alert alert-info existing-info" style="display: none;"><i></i><span>The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methos of choice. </span></div>
<!--card body start-->
<div class="card-body pt-2">
<div class="row">
<div class="col-md-12">
<h6 class="payment-sub-head">Monthly Payments</h6>
<img src="images/kaspersky-icon.png">
<div class="payment-heading">Kaspersky</div>
</div>
<div class="col-md-12 mt-2">
<div class="alert alert-danger discount-error" style="display: none;"><i></i>
<span>This Special Pricing code is invalid. Please remove or enter valid code to continue checkout.</span>
</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td><span class="prod-nam">Kaspersky Internet Security</span></td>
<td class="text-right">50.40</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td class="text-right"><span>150.80</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 office-payment px-0">
<label>Select Payment Method</label>
<div class="custom-dropdown dropdown cards-custom-dropdown hideForSamePaymnt">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<img class="visa-img" src="images/visa.png"><span class="selected-value">5134 0373 9596 7276</span>
</button>
<div class="dropdown-menu">
<span class="card-heading">Credit Cards</span>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>7759 6186 5454 4799</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2752 9377 5017 0746</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2589 2627 8276 3675</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>4062 3143 2637 3837</span></a>
<a class="dropdown-item add-cart-link" href="javascript:void(0);" data-toggle="modal" data-target="#addCard"><i class="icon-plus"></i><span>Add Card</span></a>
<a class="dropdown-item add-cart-link" href="manage-card.html"><i class="icon-user-setting"></i></i><span>Manage Cards</span></a>
<hr class="divider-line">
<span class="card-heading">Net Payments</span>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
<div class="col-md-12">
<hr class="divide-line" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="bundle-lbl">Bundle</span>
<div class="payment-heading">Microsoft Surface Pro with Cloud Bundle</div>
</div>
<div class="col-md-12 mt-2">
<div class="alert alert-danger discount-error" style="display: none;"><i></i>
<span>This Special Pricing code is invalid. Please remove or enter valid code to continue checkout.</span>
</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td><span class="prod-nam">Microsoft 365 Basic </span></td>
<td class="text-right">60.90</td>
</tr>
<tr>
<td><span class="prod-nam">Dropbox BUS STD-NEW 3-299 SEATS</span></td>
<td class="text-right">150.00</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td class="text-right"><span>210.90</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<div class="payment-method-info" ><span class="payment-text">Payment Method:</span><br><span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div>
</div>
<div class="col-md-12">
<hr class="divide-line" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h6 class="payment-sub-head mt-3">One-Time Payment</h6>
<img src="images/microsoft.png">
<div class="payment-heading">Microsoft Surface Pro</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-4">
<tbody>
<tr>
<td style="width: 82%;"><span class="prod-nam">S.PRO 128GB M 4GB COMM</span></td>
<td class="text-right" style="width: 18%;">5,939.40</td>
</tr>
<tr>
<td>Freight</td>
<td class="text-right">56.23</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td class="text-right"><span>5,995.63</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<div class="payment-method-info" ><span class="payment-text">Payment Method:</span><br><span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td style="width: 82%;"><span class="prod-nam">Microsoft Surface Pro Type Cover with...</span></td>
<td class="text-right" style="width: 18%;">109.00</td>
</tr>
<tr>
<td>Freight</td>
<td class="text-right">16.23</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td class="text-right"><span>122.23</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<label>Select Payment Method</label>
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<img class="visa-img" src="images/visa.png"><span class="selected-value">5134 0373 9596 7276</span>
</button>
<div class="dropdown-menu">
<span class="card-heading">Credit Cards</span>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>7759 6186 5454 4799</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2752 9377 5017 0746</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2589 2627 8276 3675</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>4062 3143 2637 3837</span></a>
<a class="dropdown-item add-cart-link" href="javascript:void(0);"><i class="icon-plus"></i><span>Add Cart</span></a>
<hr class="divider-line">
<span class="card-heading">Net Payments</span>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
<div class="col-md-12">
<hr class="divide-line" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/hp-icon.png">
<div class="payment-heading">HP SMB Solution</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td style="width: 82%;"><span class="prod-nam">HP 90W Slim AC Adapter</span></td>
<td style="width: 18%;">82.23</td>
</tr>
<tr>
<td>Freight</td>
<td>12.24</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td><span>94.47</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<label>Select Payment Method</label>
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<img class="visa-img" src="images/visa.png"><span class="selected-value">5134 0373 9596 7276</span>
</button>
<div class="dropdown-menu">
<span class="card-heading">Credit Cards</span>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>7759 6186 5454 4799</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2752 9377 5017 0746</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2589 2627 8276 3675</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>4062 3143 2637 3837</span></a>
<a class="dropdown-item add-cart-link" href="javascript:void(0);"><i class="icon-plus"></i><span>Add Cart</span></a>
<hr class="divider-line">
<span class="card-heading">Net Payments</span>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
<div class="col-md-12">
<hr class="divide-line" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/asus-icon.png">
<div class="payment-heading">Cerberus Gaming Keyboard and Mouse</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td style="width: 82%;"><span class="prod-nam">Cerberus Gaming Keyboard and Mouse</span></td>
<td style="width: 18%;">22.99</td>
</tr>
<tr>
<td>Freight</td>
<td>3.79</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td><span>26.78</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<label>Select Payment Method</label>
<div class="custom-dropdown dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<img class="visa-img" src="images/visa.png"><span class="selected-value">5134 0373 9596 7276</span>
</button>
<div class="dropdown-menu">
<span class="card-heading">Credit Cards</span>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>7759 6186 5454 4799</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2752 9377 5017 0746</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>2589 2627 8276 3675</span></a>
<a class="dropdown-item " href="javascript:void(0);"><img src="images/visa.png"><span>4062 3143 2637 3837</span></a>
<a class="dropdown-item add-cart-link" href="javascript:void(0);"><i class="icon-plus"></i><span>Add Cart</span></a>
<hr class="divider-line">
<span class="card-heading">Net Payments</span>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item net-pay" href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
<div class="col-md-12">
<hr class="divide-line" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="bundle-lbl">Bundle</span>
<div class="payment-heading">Microsoft Surface Pro with Cloud Bundle</div>
</div>
<div class="col-md-12 mt-2">
<div class="alert alert-danger discount-error" style="display: none;"><i></i>
<span>This Special Pricing code is invalid. Please remove or enter valid code to continue checkout.</span>
</div>
</div>
<div class="col-md-7">
<table class="table payment-table mb-0">
<tbody>
<tr>
<td><span class="prod-nam">Microsoft Surface Pro</span></td>
<td class="text-right">1,350.90</td>
</tr>
<tr>
<td>Freight</td>
<td class="text-right">16.23</td>
</tr>
<tr class="total-amount">
<td>Total</td>
<td class="text-right"><span>1,367.13</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5 px-0">
<div class="payment-method-info" ><span class="payment-text">Payment Method:</span><br><span class="card-type"> Credit Card</span> <img class="visa-img" src="images/visa.png"> <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="The service exists in the existing contract and will use the payment method set by the contract. The rest will use the current payment methods of choice."></i></div>
</div>
</div>
<input type="button" class="btn btn-primary float-right mt-3 usePayment" value="Next">
<div class="clearfix"></div>
</div>
<!--card body end-->
</div>
</div>
</div>
<!--accordion end-->
<!--accordion start-->
<div class="accordion custom-accordion checkout-accordion">
<div class="card">
<div class="card-header p-0 " data-toggle="collapse" data-target="#checkout4" aria-expanded="true" aria-controls="checkout4">
<div class="card-heading mr-auto">
<h2>5. XpressTrak Shipping Notification</h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#checkout4" aria-expanded="true" aria-controls="checkout4"></i>
</div>
<div id="checkout4" class="collapse body" aria-labelledby="checkout4" data-parent="#checkoutAccordion">
<!--card body start-->
<div class="card-body pt-2">
<div class="row">
<div class="col-md-12">
<div class="notification-system">
<h6>Synnex XpressTrak Notification System</h6>
<p>XpressTrak emails Order, Release, Shipping, Delivery and Proof of Delivery notifications in Reseller or End Customer format.
Emails to your customers use this ‘From’ Address -<a href="javascript:void(0);"><i class="icon-customer-email"></i>orderstatus@xpresstrak.com</a> - and the content will look like it is from your company.
There is no limit to the number of notifications you can send.</p>
</div>
<div class="reseller-endcustomer">
<div class="reseller-email">
<h1 class="pl-0">Reseller Email (Inc Costs)</h1>
<div class="email-section pl-0">
<ul>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email1" name="shiptime1">
<label class="custom-control-label" for="email1">PO ETA update Notification (Receive updates on Vendor PO for your order)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email2" name="shiptime1">
<label class="custom-control-label" for="email2">Order Release Notification (When the order is released by Finance)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email3" name="shiptime1">
<label class="custom-control-label" for="email3">Shipment Notification (When the order ships)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email4" name="shiptime1">
<label class="custom-control-label" for="email4">Delivery Notification (Carrier confirms package delivery)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email5" name="shiptime1">
<label class="custom-control-label" for="email5">Proof of Delivery (Signature)</label>
</div>
</li>
</ul>
<span class="email-from">Include co-workers on this email from <a href="javascript:void(0);">My Address Book</a></span>
<div class="email-here">
<label>Or type in co-worker email addresses here</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder="add email address here...">
</div>
<span class="seprate-email">Separate each email address with a semicolon (;)</span>
</div>
</div>
</div>
<div class="reseller-email">
<h1>Email End Customer</h1>
<div class="email-section email-endcustomer pr-0">
<ul>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email1" name="shiptime1">
<label class="custom-control-label" for="email1">PO ETA update Notification (Receive updates on Vendor PO for your order)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email2" name="shiptime1">
<label class="custom-control-label" for="email2">Order Release Notification (When the order is released by Finance)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email3" name="shiptime1">
<label class="custom-control-label" for="email3">Shipment Notification (When the order ships)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email4" name="shiptime1">
<label class="custom-control-label" for="email4">Delivery Notification (Carrier confirms package delivery)</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="email5" name="shiptime1">
<label class="custom-control-label" for="email5">Proof of Delivery (Signature)</label>
</div>
</li>
</ul>
<span class="email-from">Send End Customer an email from <a href="javascript:void(0);">orderstatus@XpressTrak</a> (with my company’s contact info) from <a href="javascript:void(0);">My End Customer Address Book</a></span>
<div class="email-here">
<label>Or type in co-worker email addresses here</label>
<div class="search-input-col">
<i class="icon-cross" style="display: none;"></i>
<input type="text" class="form-control form-control-padding cust-po" placeholder="add email address here...">
</div>
<span class="seprate-email">Separate each email address with a semicolon (;)</span>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="button" class="btn btn-primary float-right mt-3" value="Previous">
<div class="clearfix"></div>
</div>
<!--card body end-->
</div>
</div>
</div>
<!--accordion end-->
</div>
</div>