Files
pms/pms/views/precheckin_portal_templates.xml
2023-03-08 11:45:20 +01:00

1889 lines
94 KiB
XML

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<!--folio template -->
<template id="portal_my_prechekin_folio" name="My precheckin in folio">
<t t-call="portal.portal_layout">
<t t-foreach="folio.reservation_ids" t-as="reservation">
<t t-set="reservation" t-value="reservation" />
<form
t-att-action="'/my/folios/'+str(folio.id)+'/reservations/'+str(reservation.id)+'/checkins'"
method="post"
>
<div class="reservation-card">
<button id="btn-room" type="submit" class="btn-room">
<div style="margin-left:6px;">
<span t-field="reservation.folio_sequence"/>
<span t-field="reservation.room_type_id.name" />
</div>
<div style="margin-right:6px;">
<span class="fa fa-user-o"/>
<t t-esc="reservation.adults - reservation.pending_checkin_data"/> /
<span t-field="reservation.adults" /> completed
</div>
<span id="pending-data" class="d-none"><t t-esc="reservation.pending_checkin_data"/></span>
</button>
</div>
</form>
</t>
</t>
<script>
var adultsIncompleted = document.getElementById("pending-data").innerText;
if(!adultsIncompleted){
var buttonRoom = document.getElementById("btn-room");
buttonRoom.style.backgroundColor = #6c757d;
}
</script>
<style>
.reservation-card {
width: 100%;
height:36px;
border-radius: 5px;
margin-top: 4px;
}
.reservation-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.btn-room{
display:flex;
justify-content: space-between;
align-items: center;
background-color: #3AADAA;
border: none;
color: #FFFFFF;
width: 100%;
height:36px;
border-radius: 5px;
}
</style>
</template>
<!-- reservation template -->
<template id="portal_my_prechekin_reservation" name="My precheckin in folio">
<t t-call="portal.portal_layout">
<t t-set="checkins_count" t-value="1"/>
<t t-foreach="reservation.checkin_partner_ids" t-as="checkin_partner">
<form
t-att-action="'/my/folios/'+str(folio.id)+'/reservations/'+str(reservation.id)+'/checkins/'+str(checkin_partner.id)"
method="post"
>
<div class="checkin-card">
<t t-if="checkin_partner.state not in ['dummy','draft']">
<t t-esc="checkin_partner.name"/>
<span> -- Complete data</span>
</t>
<t t-else="">
<button type="submit" class="btn-host">
<span style="margin-left: 6px">Host <t t-esc="checkins_count" /></span>
<span style="margin-right: 6px"> Incomplete data</span>
</button>
<t t-set="checkins_count" t-value="checkins_count + 1"/>
</t>
</div>
</form>
</t>
</t>
<script />
<style>
.checkin-card {
width: 100%;
height:36px;
border-radius: 5px;
margin-top: 4px;
},
.checkin-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.btn-host{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3AADAA;
border: none;
color: #FFFFFF;
width: 100%;
height:36px;
border-radius: 5px;
text-align: left;
}
</style>
</template>
<!-- checkin form without error handling-->
<template id="portal_my_precheckin_detail" name="My Precheckin">
<t t-call="portal.portal_layout">
<form id="checkinForm" t-att-action="checkin_partner.get_portal_url()" method="post" >
<div class="row o_portal_details">
<div id="title" class="form-group col-xl-12" style="margin-top:6px;">
<center>
<h4 class="font-weight-bold">PreCheckin in <span
t-field="folio.pms_property_id.name"
/></h4>
<h5
class="font-weight-bold mt-2"
>Room: <span t-field="reservation.folio_sequence"/> <span t-field="reservation.room_type_id.name"/></h5>
</center>
</div>
<div class="row justify-content-center">
<div t-attf-class="form-group col-12 col-md-6">
<label class="col-form-label" for="firstname">Name<small
> *</small></label>
<input
type="text"
name="firstname"
id="firstname"
t-attf-class="form-control"
maxlength="30"
t-attf-oninput="removeErrorClass(this)"
/>
<span id="name-error" class="d-none text-danger">Firstname is a required field</span>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
class="col-form-label"
for="lastname"
>Lastname *</label>
<input
type="text"
name="lastname"
id="lastname"
t-attf-class="form-control"
maxlength="30"
t-attf-oninput="removeErrorClass(this)"
/>
<span id="lastname-error" class="d-none text-danger">Lastname is a required field</span>
</div>
<div t-attf-class="form-group col-12 col-md-6 pb-md-5">
<label
class="col-form-label"
for="lastname2"
> Second Lastname (Optional)</label>
<input
type="text"
name="lastname2"
id="lastname2"
t-attf-class="form-control"
maxlength="30"
t-attf-oninput="removeErrorClass(this)"
/>
<span id="sndlastnameError" class="d-none text-danger">If the nationality is Spanish, a second lastname must be provided</span> </div>
<div t-attf-class="form-group col-12 col-md-6 pb-5">
<label
class="col-form-label"
for="gender"
>Gender *</label>
<div class="d-none"><p id="genderId"><t
t-esc="gender"
/></p></div>
<select
class="form-control"
name="gender"
id="gender"
t-attf-class="form-control"
t-attf-onchange="removeErrorClass(this)"
>
<option value="">Select an option</option>
<option
value="female"
t-att-selected="'female' == gender"
>
Female
</option>
<option
value="male"
t-att-selected="'male' == gender"
>
Male
</option>
<option
value="other"
t-att-selected="'other' == gender"
>
Other
</option>
</select>
<span id="gender-error" class="d-none text-danger">Gender is a required field</span>
</div>
<div
name="document_type_div"
t-attf-class="form-group col-12 col-md-6"
>
<label
class="col-form-label"
for="document_type"
>Doc. Type *</label>
<select
class="form-control"
name='document_type'
id="doc_type"
>
<option value="">Select an option</option>
<t t-foreach="doc_type_ids" t-as='doc_type'>
<option
t-att-value="doc_type.name"
t-att-selected="doc_type.name == document_type"
>
<t t-esc='doc_type.name' />
</option>
</t>
</select>
</div>
<div
name="document_number_div"
t-attf-class="form-group col-12 col-md-6"
>
<label
class="col-form-label"
for="document_number"
>Doc. Number *</label>
<input
type="text"
name="document_number"
t-attf-class="form-control"
maxlength="14"
/>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
class="col-form-label"
for="document_expedition_date"
>Doc. Expedition Date/Doc. Validity Date *</label>
<span
class="fa fa-question-circle fa-lg ml-4"
data-toggle="tooltip"
title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."
/>
<input
type="text"
name="document_expedition_date"
id="docExpDate"
t-attf-class="form-control"
data-date-format="dd/mm/yyyy"
value="01/01/2020"
t-attf-onclick="changeDatepickerArrow(this)"
/>
<span id="docExpDate-error" class="d-none text-danger">Doc. Expedition or Validate date is a required field</span>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
class="col-form-label"
for="datepicker"
> Birth Date *</label>
<input
type="text"
name="birthdate"
id="birthdateId"
t-attf-class="form-control"
data-date-format="dd/mm/yyyy"
value="01/01/1980"
t-attf-onclick="changeDatepickerArrow(this)"
/>
<span id="birthdate-error" class="d-none text-danger">Birthdate cannot be older than today</span>
</div>
<div class="d-none" id="countryDiv">
<t t-foreach="country_ids" t-as='country_id'>
<span t-att-id="country_id.name" t-att-country_name="country_id.name" t-att-country_id="country_id.id"/>
</t>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
class="col-form-label"
for="nationality_id"
>Nationality *</label><br/>
<div class="dropdown">
<input type="text" t-attf-class="form-control" placeholder="Search.." id="myInput" onclick="showCountries(true)" oninput="filterFunction()"/>
<div id="myDropdown" class="dropdown-content">
<t t-foreach="country_ids" t-as='country_id'>
<a t-attf-onclick="selectNationality(this)">
<t t-esc='country_id.name' />
</a>
</t>
</div>
<span id="nationalitySpainError" class="d-none text-danger">If the nationality is Spanish, a second lastname must be provided</span>
<span id="nationalityError" class="d-none text-danger">Nationality is a required field</span>
</div>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
id="label_mobile"
class="col-form-label"
for="mobile"
>Mobile (Optional)</label>
<input
type="phone"
name="mobile"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
id="label_phone"
class="col-form-label"
for="phone"
>Phone (Optional)</label>
<input
type="phone"
name="phone"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<label
id="label_email"
class="col-form-label"
for="email"
>Email (Optional)</label>
<input
type="email"
name="email"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-md-12 pt-md-5">
<label
class="col-form-label"
for="residence_street"
>Residence Address *</label>
<input
type="text"
placeholder="Street"
name="residence_street"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-md-12">
<input
type="text"
placeholder="Second Street (Optional)"
name="residence_street2"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<div class="dropdown">
<input
name="residence_city_zip"
t-attf-class="form-control"
type="text"
placeholder="Type your zip code here" id="myZipInput"
onclick="showZips(true)"
oninput="filterZips()"
autocomplete="off"
/>
<div id="myZipDropdown" class="dropdown-content">
<t t-foreach="zip_ids" t-as='zip_id'>
<a t-attf-onclick="completeAddressData(this)">
<span
t-att-zip_name="zip_id.name"
t-att-country_id="zip_id.country_id.id"
t-att-state_id="zip_id.state_id.id"
t-att-city_name="zip_id.city_id.name"
>
<t t-esc='zip_id.name' /> <t t-esc='zip_id.city_id.name' /> <t t-esc='zip_id.state_id.name' /> <t t-esc='zip_id.country_id.name' />
</span>
</a>
</t>
</div>
</div>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<input
type="text"
placeholder="City"
name="residence_city"
id="residence-city"
t-attf-class="form-control"
/>
</div>
<div t-attf-class="form-group col-12 col-md-6">
<select
t-attf-class="form-control"
id="residence-country"
name='residence_country_id'
onclick="changeCountryFormClass()"
>
<option
id="country_placeholder"
hidden="1"
value="placeholder"
>Country</option>
<t t-foreach="country_ids" t-as='country_id'>
<option
t-att-value="country_id.id"
t-att-selected="str(country_id.id) == residence_country_id if residence_country_id and error else placeholder"
>
<t t-esc='country_id.name' />
</option>
</t>
</select>
</div>
<div t-attf-class="form-group col-12 col-md-6 pb-md-3">
<select
t-attf-class="form-control"
id="residence-state"
name='residence_state_id'
onclick="changeFormClass()"
>
<option
id="placeholder"
hidden="1"
value="placeholder"
>State</option>
<t t-foreach="state_ids" t-as='state'>
<option
t-att-value="state.id"
t-att-country_id="state.country_id.id"
t-att-selected="str(state.id) == residence_state_id if residence_state_id and error else placeholder"
>
<t t-esc="state.name" />
</option>
</t>
</select>
</div>
<div t-attf-class="form-group col-md-12">
<button
type="button"
class="btn btn-primary float-right"
onclick="validateAndSend()"
>
Save
</button>
</div>
</div>
</div>
</form>
</t>
<style>
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #6c757d;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
top: 100px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 100px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 100px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 100px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 100px; opacity: 1;}
to {top: 0; opacity: 0;}
}
.placeholder-class{
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: grey;
background-color: #FFFFFF;
background-clip: padding-box;
border: 1px solid #CED4DA;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
border: 1px solid #CED4DA;
border-radius: 0.25rem;
border-bottom: 1px solid #ddd;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#myInput:focus {outline: 3px solid #93dbd9;}
#myZipInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
border: 1px solid #CED4DA;
border-radius: 0.25rem;
border-bottom: 1px solid #ddd;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#myZipInput:focus {outline: 3px solid #93dbd9;}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
max-height: 150px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
#div-country-options{
display:none;
}
.dropdown a:hover {background-color: #ddd;}
.error {
border: 1px solid red;
}
</style>
<script class="origin" type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/pms/static/src/js/widgets/datepicker/bootstrap-datepicker.js" charset="UTF-8"></script>
<link rel="stylesheet" href="/pms/static/src/js/widgets/datepicker/datepicker.css"/>
<script>
$('#birthdateId').datepicker({
startView: 'decade',
});
$('#docExpDate').datepicker({
startView: 'decade',
});
var placeholder_country = document.getElementById("country_placeholder")
function changeCountryFormClass() {
let select_value = placeholder_country.parentNode.value
if (placeholder_country.parentNode.value == 'placeholder'){
placeholder_country.parentNode.classList.add('placeholder-class')
}else{
placeholder_country.parentNode.classList.remove('placeholder-class')
}
};
this.changeCountryFormClass()
var placeholder = document.getElementById("placeholder")
function changeFormClass() {
let select_value = placeholder.parentNode.value
if (placeholder.parentNode.value == 'placeholder'){
placeholder.parentNode.classList.remove('form-control')
placeholder.parentNode.classList.add('placeholder-class')
}else{
placeholder.parentNode.classList.remove('placeholder-class')
placeholder.parentNode.classList.add('form-control')
}
};
this.changeFormClass()
let select_residence_country = document.getElementById('residence-country')
select_residence_country.addEventListener("change", () => {
this.filterStates();
});
let select_residence_state = document.getElementById('residence-state')
function filterStates(){
let country_value = select_residence_country.value
Array.from(document.getElementById('residence-state').options).forEach(element => {
if (element.getAttribute('country_id') == country_value) {
element.style="";
} else {
element.style="display:none";
}
});
}
var select_doc_type = document.getElementById("doc_type")
var document_type_value = document.getElementById("docTypeId").textContent
for (let i=0;i&lt;select_doc_type.length;i++){
if (select_doc_type[i].value == document_type_value){
select_doc_type[i].setAttribute("selected","True")
}
}
var folio_id = document.getElementById("folio").value
var checkin_partner_id = document.getElementById("checkin").value
var access_token = document.getElementById("input_access_token").value
var checkin_pos = document.getElementById("input_checkin_pos").value;
<!-- TODO: add reservation_id in url -->
window.history.pushState(null, '', '/my/precheckin/'+folio_id+'/checkin/'+checkin_partner_id +'?access_token='+ access_token);
function showCountries(show){
if(show){
document.getElementById("myDropdown").classList.toggle("show");
}else{
document.getElementById("myDropdown").classList.toggle("show");
}
}
function selectNationality(element){
var nationality = element.innerText;
document.getElementById("myInput").value = nationality;
this.showCountries(false);
}
function showZips(showZips){
if(showZips){
document.getElementById("myZipDropdown").classList.toggle("show");
}else{
document.getElementById("myZipDropdown").classList.toggle("show");
}
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i&lt;a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.trim().toUpperCase().startsWith(filter)) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
this.filterFunction()
function filterZips() {
var input, filter, ul, li, a, i;
input = document.getElementById("myZipInput");
filter = input.value.toUpperCase();
div = document.getElementById("myZipDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i&lt;a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.trim().toUpperCase().startsWith(filter)) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
function completeAddressData(element){
var zip_name = element.firstChild.nextSibling.getAttribute("zip_name");
var country_id = element.firstChild.nextSibling.getAttribute("country_id");
var state_id = element.firstChild.nextSibling.getAttribute("state_id");
var city_name = element.firstChild.nextSibling.getAttribute("city_name");
document.getElementById("myZipInput").value = zip_name;
Array.from(document.getElementById('residence-country').options).forEach(element => {
if (element.value == country_id) {
element.selected = true
element.style.color = "black";
this.filterStates();
}
});
Array.from(document.getElementById('residence-state').options).forEach(element => {
if (element.value == state_id) {
element.style.color = "black";
element.selected = true
}
});
document.getElementById('residence-city').value = city_name;
this.showZips(false);
}
function changeDatepickerArrow(element){
var arrowLeftDatepicker = document.getElementsByClassName("icon-arrow-left");
for(let item of arrowLeftDatepicker){
item.classList.remove("icon-arrow-left");
item.classList.add("fa","fa-arrow-left");
}
var arrowRightDatepicker = document.getElementsByClassName("icon-arrow-right");
for(let item of arrowRightDatepicker){
item.classList.remove("icon-arrow-right");
item.classList.add("fa","fa-arrow-right");
}
}
function removeErrorClass(element){
element.classList.remove("error");
element.nextElementSibling.classList.add("d-none");
}
function validateAndSend(event){
var firstname = document.getElementById("firstname");
var lastname = document.getElementById("lastname");
if(!firstname.value){
firstname.classList.add("error");
document.getElementById("name-error").classList.remove("d-none");
}
if( !lastname.value){
lastname.classList.add("error");
document.getElementById("lastname-error").classList.remove("d-none");
}
var gender = document.getElementById("gender");
if(!gender.value){
gender.classList.add("error");
document.getElementById("name-error").classList.remove("d-none");
}
<!-- var document_type = document.getElementById("document_type").value;-->
<!-- var document_number = document.getElementById("document_number").value;-->
<!-- var document_expedition_date = document.getElementById("document_expedition_date").value;-->
var birthdate = document.getElementById("birthdateId").value;
var birthdateParts = birthdate.split("/");
var birthdateDate = new Date(birthdateParts[2], birthdateParts[1]-1, birthdateParts[0]);
var todayDate = new Date();
if (todayDate.getTime() &lt;= birthdateDate.getTime()){
document.getElementById("birthdateId").classList.add("error");
document.getElementById("birthdate-error").classList.remove("d-none");
}
var nationality = document.getElementById("myInput").value;
var lastname2 = document.getElementById("lastname2").value;
var nationalityId = document.getElementById(nationality).getAttribute("country_id");
if(!nationalityId){
document.getElementById("myInput").classList.add("error");
document.getElementById("nationalityError").classList.remove("d-none");
}else{
if(nationalityId == 68){
if(!lastname2){
document.getElementById("myInput").classList.add("error");
document.getElementById("lastname2").classList.add("error");
document.getElementById("nationalitySpainError").classList.remove("d-none");
document.getElementById("sndlastnameError").classList.remove("d-none");
}
}
}
<!-- var mobile = document.getElementById("mobile").value;-->
<!-- var phone = document.getElementById("phone").value;-->
<!-- var email = document.getElementById("email").value;-->
<!-- var residence_street = document.getElementById("residence_street").value;-->
<!-- var residence_street2 = document.getElementById("residence_street2").value;-->
<!-- var residence_city_zip = document.getElementById("residence_city_zip").value;-->
<!-- var residence_city = document.getElementById("residence_city").value;-->
<!-- var residence_country_id = document.getElementById("residence_country_id").value;-->
<!-- var residence_state_id = document.getElementById("residence_state_id").value;-->
<!-- document.getElementById("checkinForm").submit();-->
}
</script>
</template>
<!-- checkin form-->
<!-- <template id="portal_my_precheckin_detail2" name="My Precheckin">-->
<!-- <t t-call="portal.portal_layout">-->
<!-- <form t-att-action="checkin_partner_id.get_portal_url()" method="post">-->
<!-- <div class="row o_portal_details">-->
<!-- <div id="title" class="form-group col-xl-12">-->
<!-- <center>-->
<!-- <h4 class="font-weight-bold">PreCheckin in <span-->
<!-- t-field="folio.pms_property_id.name"-->
<!-- /></h4>-->
<!-- </center>-->
<!-- </div>-->
<!-- <div class="form-group col-xl-12">-->
<!-- <center>-->
<!-- <h5-->
<!-- class="font-weight-bold mt-2"-->
<!-- t-esc="'Room: '+checkin_partner_id.reservation_id.sudo().room_type_id.name if checkin_partner_id.reservation_id else ''"-->
<!-- />-->
<!-- </center>-->
<!-- <input-->
<!-- type="text"-->
<!-- name="access_token"-->
<!-- id="input_access_token"-->
<!-- class="d-none"-->
<!-- t-att-value="access_token or checkin_partner_id.access_token"-->
<!-- />-->
<!-- <input-->
<!-- type="text"-->
<!-- name="checkin_partner_id"-->
<!-- id="checkin"-->
<!-- class="d-none"-->
<!-- t-att-value="checkin_partner_id.id"-->
<!-- />-->
<!-- <input-->
<!-- type="text"-->
<!-- name="folio_id"-->
<!-- id="folio"-->
<!-- class="d-none"-->
<!-- t-att-value="folio.id"-->
<!-- />-->
<!-- </div>-->
<!-- <t t-if="checkin_pos >= 0">-->
<!-- <div class="form-group col-xl-12">-->
<!-- <center>-->
<!-- <h5 class="font-weight-bold">-->
<!-- Covering <span-->
<!-- t-esc="int(checkin_pos) + 1"-->
<!-- /> partner <br />-->
<!-- <span-->
<!-- t-esc="len(folio.checkin_partner_ids.filtered(lambda c: c.state in ['dummy','draft']))-int(checkin_pos)"-->
<!-- />-->
<!-- partner data to remain to be covered-->
<!-- </h5>-->
<!-- </center>-->
<!-- </div>-->
<!-- </t>-->
<!-- <div class="row justify-content-center">-->
<!-- <div class="col-11 col-md-8 row pt-3">-->
<!-- <div t-attf-class="form-group col-12 col-md-6">-->
<!-- <label class="col-form-label" for="firstname">Name<small-->
<!-- >*</small></label>-->
<!-- <input-->
<!-- type="text"-->
<!-- name="firstname"-->
<!-- t-attf-class="form-control #{error.get('firstname') and 'is-invalid' or ''}"-->
<!-- t-att-value="firstname if error and firstname else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('firstname')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="col-12 col-md-6">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="lastname"-->
<!-- >Lastname</label>-->
<!-- <input-->
<!-- type="text"-->
<!-- name="lastname"-->
<!-- t-attf-class="form-control #{error.get('firstname') and 'is-invalid' or ''}"-->
<!-- t-att-value="lastname if lastname and error else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-12 col-md-6 pb-md-5">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="lastname2"-->
<!-- > Second Lastname (Optional)</label>-->
<!-- <input-->
<!-- type="text"-->
<!-- name="lastname2"-->
<!-- t-attf-class="form-control"-->
<!-- t-att-value="lastname2 if error and lastname2 else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="col-12 col-md-6 pb-5">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="gender"-->
<!-- >Gender</label>-->
<!-- <div class="d-none"><p id="genderId"><t-->
<!-- t-esc="gender"-->
<!-- /></p></div>-->
<!-- <select-->
<!-- class="form-control"-->
<!-- name="gender"-->
<!-- t-att-value="gender if gender and error else ''"-->
<!-- t-attf-class="form-control #{error.get('gender') and 'is-invalid' or ''}"-->
<!-- >-->
<!-- <option value="">Select an option</option>-->
<!-- <option-->
<!-- value="female"-->
<!-- t-att-selected="'female' == gender"-->
<!-- >-->
<!-- Female-->
<!-- </option>-->
<!-- <option-->
<!-- value="male"-->
<!-- t-att-selected="'male' == gender"-->
<!-- >-->
<!-- Male-->
<!-- </option>-->
<!-- <option-->
<!-- value="other"-->
<!-- t-att-selected="'other' == gender"-->
<!-- >-->
<!-- Other-->
<!-- </option>-->
<!-- </select>-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('gender')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div-->
<!-- name="document_type_div"-->
<!-- t-attf-class="col-12 col-md-6"-->
<!-- >-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="document_type"-->
<!-- >Doc. Type</label>-->
<!-- <div class="d-none"><p id="docTypeId"><t-->
<!-- t-esc="document_type"-->
<!-- /></p></div>-->
<!-- <select-->
<!-- class="form-control #{error.get('document_type') and 'is-invalid' or ''}"-->
<!-- name='document_type'-->
<!-- id="doc_type"-->
<!-- >-->
<!-- <option value="">Select an option</option>-->
<!-- <t t-foreach="doc_type_ids" t-as='doc_type'>-->
<!-- <option-->
<!-- t-att-value="doc_type.name"-->
<!-- t-att-selected="doc_type.name == document_type"-->
<!-- >-->
<!-- <t t-esc='doc_type.name' />-->
<!-- </option>-->
<!-- </t>-->
<!-- </select>-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('document_type')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div-->
<!-- name="document_number_div"-->
<!-- t-attf-class="col-12 col-md-6"-->
<!-- >-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="document_number"-->
<!-- >Doc. Number</label>-->
<!-- <input-->
<!-- type="text"-->
<!-- name="document_number"-->
<!-- t-attf-class="form-control #{error.get('document_number') and 'is-invalid' or ''}"-->
<!-- t-att-value="document_number if document_number and error else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('document_number')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="col-12 col-md-6">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="document_expedition_date"-->
<!-- >Doc. Expedition Date/Doc. Validity Date</label>-->
<!-- <span-->
<!-- class="fa fa-question-circle fa-lg ml-4"-->
<!-- data-toggle="tooltip"-->
<!-- title="If you enter the validity date of the document, the expedition date will be automatically calculated and entered depending on the document type."-->
<!-- />-->
<!-- <input-->
<!-- type="date"-->
<!-- name="document_expedition_date"-->
<!-- t-attf-class="form-control #{error.get('document_expedition_date') and 'is-invalid' or ''}"-->
<!-- t-att-value="document_expedition_date"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('document_expedition_date')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-12 col-md-6">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="birthdate_date"-->
<!-- > Birth Date</label>-->
<!-- <input-->
<!-- type="date"-->
<!-- name="birthdate_date"-->
<!-- t-attf-class="form-control #{error.get('birthdate_date') and 'is-invalid' or ''}"-->
<!-- t-att-value="birthdate_date if birthdate_date and error else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('birthdate_date')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="col-12 col-md-6">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="nationality_id"-->
<!-- >Nationality</label>-->
<!-- <select-->
<!-- t-attf-class="form-control #{error.get('nationality_id') and 'is-invalid' or ''}"-->
<!-- id="country"-->
<!-- name='nationality_id'-->
<!-- value="nationality_id if nationality_id and error else ''"-->
<!-- >-->
<!-- <option value="">Select an option</option>-->
<!-- <t t-foreach="country_ids" t-as='country_id'>-->
<!-- <option-->
<!-- t-att-value="country_id.id"-->
<!-- t-att-selected="str(country_id.id) == nationality_id"-->
<!-- >-->
<!-- <t t-esc='country_id.name' />-->
<!-- </option>-->
<!-- </t>-->
<!-- </select>-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('nationality_id')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-12 col-md-6">-->
<!-- <label-->
<!-- id="label_mobile"-->
<!-- class="col-form-label"-->
<!-- for="mobile"-->
<!-- >Mobile (Optional)</label>-->
<!-- <input-->
<!-- type="phone"-->
<!-- name="mobile"-->
<!-- t-attf-class="form-control #{error.get('mobile') and 'is-invalid' or ''}"-->
<!-- t-att-value="mobile if mobile and error else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('mobile')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-12 col-md-6">-->
<!-- <label-->
<!-- id="label_phone"-->
<!-- class="col-form-label"-->
<!-- for="phone"-->
<!-- >Phone (Optional)</label>-->
<!-- <input-->
<!-- type="phone"-->
<!-- name="phone"-->
<!-- t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}"-->
<!-- t-att-value="phone if phone and error else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('phone')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-12 col-md-6">-->
<!-- <label-->
<!-- id="label_email"-->
<!-- class="col-form-label"-->
<!-- for="email"-->
<!-- >Email (Optional)</label>-->
<!-- <input-->
<!-- type="email"-->
<!-- name="email"-->
<!-- t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}"-->
<!-- t-att-value="email if email and error else ''"-->
<!-- />-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('email')"-->
<!-- />-->
<!-- </t>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-12 pt-md-5">-->
<!-- <label-->
<!-- class="col-form-label"-->
<!-- for="residence_street"-->
<!-- >Residence Address</label>-->
<!-- <input-->
<!-- type="text"-->
<!-- placeholder="Street"-->
<!-- name="residence_street"-->
<!-- t-attf-class="form-control #{error.get('address') and 'is-invalid' or ''}"-->
<!-- t-att-value="residence_street if residence_street else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-12">-->
<!-- <input-->
<!-- type="text"-->
<!-- placeholder="Second Street (Optional)"-->
<!-- name="residence_street2"-->
<!-- t-attf-class="form-control"-->
<!-- t-att-value="residence_street2 if residence_street2 and error else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-4">-->
<!-- <input-->
<!-- type="text"-->
<!-- placeholder="City"-->
<!-- name="residence_city"-->
<!-- t-attf-class="form-control #{error.get('address') and 'is-invalid' or ''}"-->
<!-- t-att-value="residence_city if residence_city and error else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-4">-->
<!-- <input-->
<!-- type="text"-->
<!-- placeholder="Zip"-->
<!-- name="residence_zip"-->
<!-- t-attf-class="form-control #{error.get('address') and 'is-invalid' or ''}"-->
<!-- t-att-value="residence_zip if residence_zip and error else ''"-->
<!-- />-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-4">-->
<!-- <select-->
<!-- t-attf-class="form-control #{error.get('address') and 'is-invalid' or ''}"-->
<!-- id="residence-country"-->
<!-- name='residence_country_id'-->
<!-- onclick="changeCountryFormClass()"-->
<!-- >-->
<!-- <option-->
<!-- id="country_placeholder"-->
<!-- hidden="1"-->
<!-- value="placeholder"-->
<!-- >Country</option>-->
<!-- <t t-foreach="country_ids" t-as='country_id'>-->
<!-- <option-->
<!-- t-att-value="country_id.id"-->
<!-- t-att-selected="str(country_id.id) == residence_country_id if residence_country_id and error else placeholder"-->
<!-- >-->
<!-- <t t-esc='country_id.name' />-->
<!-- </option>-->
<!-- </t>-->
<!-- </select>-->
<!-- </div>-->
<!-- <div t-attf-class="form-group col-md-12 pb-md-3">-->
<!-- <select-->
<!-- t-attf-class="form-control #{error.get('address') and 'is-invalid' or ''}"-->
<!-- id="residence-state"-->
<!-- name='residence_state_id'-->
<!-- onclick="changeFormClass()"-->
<!-- >-->
<!-- <option-->
<!-- id="placeholder"-->
<!-- hidden="1"-->
<!-- value="placeholder"-->
<!-- >State</option>-->
<!-- <t t-foreach="state_ids" t-as='state'>-->
<!-- <option-->
<!-- t-att-value="state.id"-->
<!-- t-att-country_id="state.country_id.id"-->
<!-- t-att-selected="str(state.id) == residence_state_id if residence_state_id and error else placeholder"-->
<!-- >-->
<!-- <t t-esc="state.name" />-->
<!-- </option>-->
<!-- </t>-->
<!-- </select>-->
<!-- </div>-->
<!-- <t t-if="error_message">-->
<!-- <span-->
<!-- class="text-danger"-->
<!-- t-esc="error_message.get('address')"-->
<!-- />-->
<!-- </t>-->
<!-- <t>-->
<!-- <div id="pager_count" class="col-4 pt-3">-->
<!-- <center>-->
<!-- Page-->
<!-- <span t-esc="int(checkin_pos) + 1" />-->
<!-- of-->
<!-- <span-->
<!-- t-esc="len(folio.checkin_partner_ids.filtered(lambda c: c.state in ['dummy','draft']))"-->
<!-- />-->
<!-- </center>-->
<!-- </div>-->
<!-- <t t-set="checkin_pos" t-value="checkin_pos+1" />-->
<!-- <input-->
<!-- type="number"-->
<!-- name="checkin_pos"-->
<!-- id="input_checkin_pos"-->
<!-- class="d-none"-->
<!-- t-att-value="checkin_pos"-->
<!-- />-->
<!-- <div class="col-6">-->
<!-- <button-->
<!-- type="submit"-->
<!-- class="btn btn-primary float-right"-->
<!-- >-->
<!-- Save and Continue-->
<!-- <span class="fa fa-long-arrow-right" />-->
<!-- </button>-->
<!-- </div>-->
<!-- </t>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<!-- </t>-->
<!-- <style>-->
<!-- #snackbar {-->
<!-- visibility: hidden;-->
<!-- min-width: 250px;-->
<!-- margin-left: -125px;-->
<!-- background-color: #6c757d;-->
<!-- color: #fff;-->
<!-- text-align: center;-->
<!-- border-radius: 2px;-->
<!-- padding: 16px;-->
<!-- position: fixed;-->
<!-- z-index: 1;-->
<!-- left: 50%;-->
<!-- top: 100px;-->
<!-- font-size: 17px;-->
<!-- }-->
<!-- #snackbar.show {-->
<!-- visibility: visible;-->
<!-- -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;-->
<!-- animation: fadein 0.5s, fadeout 0.5s 2.5s;-->
<!-- }-->
<!-- @-webkit-keyframes fadein {-->
<!-- from {top: 0; opacity: 0;}-->
<!-- to {top: 100px; opacity: 1;}-->
<!-- }-->
<!-- @keyframes fadein {-->
<!-- from {top: 0; opacity: 0;}-->
<!-- to {top: 100px; opacity: 1;}-->
<!-- }-->
<!-- @-webkit-keyframes fadeout {-->
<!-- from {top: 100px; opacity: 1;}-->
<!-- to {top: 0; opacity: 0;}-->
<!-- }-->
<!-- @keyframes fadeout {-->
<!-- from {top: 100px; opacity: 1;}-->
<!-- to {top: 0; opacity: 0;}-->
<!-- }-->
<!-- .placeholder-class{-->
<!-- display: block;-->
<!-- width: 100%;-->
<!-- height: calc(1.5em + 0.75rem + 2px);-->
<!-- padding: 0.375rem 0.75rem;-->
<!-- font-size: 0.875rem;-->
<!-- font-weight: 400;-->
<!-- line-height: 1.5;-->
<!-- color: grey;-->
<!-- background-color: #FFFFFF;-->
<!-- background-clip: padding-box;-->
<!-- border: 1px solid #CED4DA;-->
<!-- border-radius: 0.25rem;-->
<!-- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;-->
<!-- }-->
<!-- </style>-->
<!-- <script>-->
<!-- var placeholder_country = document.getElementById("country_placeholder")-->
<!-- function changeCountryFormClass() {-->
<!-- let select_value = placeholder_country.parentNode.value-->
<!-- if (placeholder_country.parentNode.value == 'placeholder'){-->
<!-- placeholder_country.parentNode.classList.add('placeholder-class')-->
<!-- }else{-->
<!-- placeholder_country.parentNode.classList.remove('placeholder-class')-->
<!-- }-->
<!-- };-->
<!-- this.changeCountryFormClass()-->
<!-- var placeholder = document.getElementById("placeholder")-->
<!-- function changeFormClass() {-->
<!-- let select_value = placeholder.parentNode.value-->
<!-- if (placeholder.parentNode.value == 'placeholder'){-->
<!-- placeholder.parentNode.classList.remove('form-control')-->
<!-- placeholder.parentNode.classList.add('placeholder-class')-->
<!-- }else{-->
<!-- placeholder.parentNode.classList.remove('placeholder-class')-->
<!-- placeholder.parentNode.classList.add('form-control')-->
<!-- }-->
<!-- };-->
<!-- this.changeFormClass()-->
<!-- let select_residence_country = document.getElementById('residence-country')-->
<!-- select_residence_country.addEventListener("change", () => {-->
<!-- let country_value = select_residence_country.value-->
<!-- Array.from(document.getElementById('residence-state').options).forEach(element => {-->
<!-- if (element.getAttribute('country_id') == country_value) {-->
<!-- element.style="";-->
<!-- } else {-->
<!-- element.style="display:none";-->
<!-- }-->
<!-- });-->
<!-- });-->
<!-- var select_doc_type = document.getElementById("doc_type")-->
<!-- var document_type_value = document.getElementById("docTypeId").textContent-->
<!-- for (let i=0;i&lt;select_doc_type.length;i++){-->
<!-- if (select_doc_type[i].value == document_type_value){-->
<!-- select_doc_type[i].setAttribute("selected","True")-->
<!-- }-->
<!-- }-->
<!-- var folio_id = document.getElementById("folio").value-->
<!-- var checkin_partner_id = document.getElementById("checkin").value-->
<!-- var access_token = document.getElementById("input_access_token").value-->
<!-- var checkin_pos = document.getElementById("input_checkin_pos").value;-->
<!-- window.history.pushState(null, '', '/my/precheckin/'+folio_id+'/checkin/'+checkin_partner_id +'?access_token='+ access_token);-->
<!-- function launchSnackBar(element) {-->
<!-- var x = document.getElementById("snackbar");-->
<!-- if (checkin_pos == -1){-->
<!-- x.className = "show";-->
<!-- setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);-->
<!-- }-->
<!-- }-->
<!-- var select_doc_type = document.getElementById("doc_type")-->
<!-- var document_type_value = document.getElementById("docTypeId").textContent-->
<!-- for (let i=0;i&lt;select_doc_type.length;i++){-->
<!-- if (select_doc_type[i].value == document_type_value){-->
<!-- select_doc_type[i].setAttribute("selected","True")-->
<!-- }-->
<!-- }-->
<!-- </script>-->
<!-- </template>-->
<!-- precheckin buttons and send invitations -->
<template id="portal_my_reservation_precheckin" name="Precheckin Reservation">
<t t-call="portal.portal_layout">
<wrap>
<div
class="oe_structure"
id="oe_structure_website_form_reservation_precheckin_1"
/>
<thead style="background-color: white;">
<tr class="active">
<center>
<h4>PreCheckin in <span
t-field="folio.pms_property_id.name"
/></h4>
</center>
</tr>
</thead>
<center>
<h5 style="margin-top:20px;">
Hi,
<span t-field="folio.sudo().partner_name" />.<br />
Do your check-in now and save time.
</h5>
<br />
This is our<strong
> quick registration system</strong>. In a few steps you will be able to register your data in an agile, simple and secure way,<strong
> avoiding queues at reception</strong>.
If you register your data in our system, <strong
> your passage through reception will be much faster</strong>, being able to enjoy the comfort of your room right away.
</center>
<div class="col-12" style="margin-top:40px;">
<form
class="col-6 float-right"
style="margin-bottom:50px"
t-att-action="folio.get_portal_url()"
method="get"
>
<button
type="submit"
class="btn btn-primary"
style="width:-webkit-fill-available"
>
<span class="fa fa-info" />
Reservation Info
</button>
<input
type="text"
name="access_token"
t-attf-class="d-none"
t-att-value="folio.access_token"
/>
<input
name="folio_id"
t-attf-class="d-none"
t-att-value="folio.id"
/>
</form>
<form
class="col-6"
style="margin-bottom:50px"
t-att-action="'/my/folios/'+str(folio.id)+'/reservations'"
method="post"
> <!--t-att-action="'/my/precheckin/'+str(folio.id)+'/checkin/'+str(checkin_partner_id.id)"-->
<input
type="text"
name="access_token"
t-attf-class="d-none"
t-att-value="checkin_partner_id.access_token"
/>
<input
name="checkin_partner_id"
t-attf-class="d-none"
t-att-value="checkin_partner_id.id"
/>
<input
type="text"
name="checkin_pos"
t-attf-class="form-control d-none"
value="0"
/>
<input
type="number"
name="first"
t-attf-class="form-control d-none"
value="1"
/>
<button
type="submit"
class="btn btn-primary"
style="width:-webkit-fill-available"
>
<span class="fa fa-wpforms" />
CHECK IN NOW!
</button>
</form>
</div>
<center>
<t t-if="len(folio.checkin_partner_ids) &gt; 1">
<div>
If you wish, you can share with the rest of the guests the access to their check-in so that they can fill it out.<br/>
<a
role="button"
t-att-href="folio.get_portal_url(suffix='/invitations')"
>
<button
type="submit"
class="btn btn-primary"
style="margin-top:40px;"
>
<span class="fa fa-share-square" />
Send Invitations
</button>
</a>
</div>
</t>
</center>
<div
class="oe_structure"
id="oe_structure_website_form_reservation_precheckin_2"
/>
</wrap>
</t>
<style>
</style>
</template>
<!-- invitations -->
<template id="portal_my_folio_invitations" name="Precheckin Folio">
<t t-call="portal.portal_layout">
<t t-if="not folio.reservation_ids">
<p
>There are currently no reservations in this folio for your account.</p>
</t>
<t t-if="folio.reservation_ids" t-call="portal.portal_table">
<tbody>
<form
class="o_pms_send_email_data"
action="/my/precheckin/folio_reservation"
method="post"
>
<t t-foreach="folio.reservation_ids" t-as="reservation">
<t t-set="count_reservation" t-value="0" />
<tr class="bg-light">
<td colspan="4">
<em class="font-weight-normal text-muted">
Room Type:
</em>
<a
t-att-title="reservation.sudo().room_type_id.name"
>
<t
t-esc="reservation.sudo().room_type_id.name"
/>
</a>
</td>
</tr>
<t
t-foreach="reservation.checkin_partner_ids"
t-as="checkin_partner"
>
<t
t-set="url"
t-value="'/my/precheckin/'+str(folio.id)+'/checkin/'+str(checkin_partner.id)"
/>
<t
t-set="count_reservation"
t-value="count_reservation + 1"
/>
<tr>
<td colspan="4">
<t t-if="checkin_partner.firstname">
<h6
t-att-id="'host_name'+str(checkin_partner.id)"
name="guest_name"
>
<t t-esc="checkin_partner.firstname" />
</h6>
</t>
<t t-else="">
<h6
t-att-id="'host_name'+str(checkin_partner.id)"
name="guest_name"
>
Guest <t t-esc="count_reservation" />
</h6>
</t>
<a
data-toggle="collapse"
t-att-data-target="id3"
class="text-primary"
>
</a>
<div class="row col-12">
<div t-attf-class="d-none">
<input
type="text"
t-att-name="'checkin_partner_id'"
t-attf-class="form-control"
t-att-value="id or (checkin_partner.id)"
/>
</div>
<div t-attf-class="form-group col-6">
<a
t-att-id="'btn_show_invitation_email'+str(checkin_partner.id)"
class="btn btn-secondary"
style="color:#fff;margin-top:20px;"
t-attf-onclick="show_invitation(this)"
>
<span
t-esc="checkin_partner.id"
class="d-none"
/>
<span class="fa fa-envelope" />
Send Email Invitation
</a>
<a
t-att-id="'btnResendInvitation' +str(checkin_partner.id)"
onclick="show_invitation(this)"
t-att-class="' btn btn-secondary d-none'"
style="color:#fff;margin-top:20px;"
>
<span class="fa fa-envelope" />
Resend Email Invitation
<span
t-esc="checkin_partner.id"
class="d-none"
/></a>
<a
t-att-id="'btn_show_invitation_whatsapp'+str(checkin_partner.id)"
class="' btn btn-secondary"
t-att-href="'whatsapp://send?text='+web_url+checkin_partner.get_portal_url()"
style="color:#fff;margin-top:20px;"
>
<span class="fa fa-whatsapp" />
Send Whatsapp Invitation
<span
t-esc="checkin_partner.id"
class="d-none"
/>
</a>
</div>
<div
class="row col-12 d-none"
t-att-id="'invitation_group'+str(checkin_partner.id)"
>
<div
t-attf-class="form-group col-4 p-2"
>
<label
id="label_firstname"
class="col-form-label"
for="invitation_firstname"
>
Name
</label>
<input
t-att-id="'invitation_firstname'+str(checkin_partner.id)"
type="text"
t-att-name="'invitation_firstname'"
t-attf-class="form-control"
t-att-value="firstname or (checkin_partner.firstname)"
/>
<span
style="color:red"
class="d-none"
t-att-id="error_inv_firstname"
>Mandatory Firstname</span>
</div>
<div
t-attf-class="form-group col-4 p-2"
>
<label
id="label_email"
class="col-form-label"
for="email"
>
Email
</label>
<input
t-att-id="'invitation_email'+str(checkin_partner.id)"
type="email"
t-att-name="'invitation_email'"
t-attf-class="form-control "
t-att-value="invitation_email or checkin_partner.email"
/>
<span
style="color:red"
class="d-none error_inv_email"
>Mandatory Email</span>
</div>
<div
t-attf-class="form-group col-4 p-3"
>
<a
id="btnInvitation"
onclick="launchSnackBar(this)"
t-att-class="' btn btn-secondary o_send_invitation_js mt-4 p-2'"
style="color:#fff; height:36px;"
>
Send Invitation<span
t-esc="checkin_partner.id"
class="d-none"
/></a>
</div>
</div>
</div>
</td>
</tr>
</t>
</t>
<div t-attf-class="form-group col-xl-6 d-none">
<input
id="folio_id"
type="text"
t-att-name="'folio_id'"
t-attf-class="form-control"
t-att-value="folio_id or folio.id"
/>
</div>
<div id="snackbar">Invitation email sent</div>
</form>
</tbody>
</t>
</t>
<style>
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #6c757d;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
top: 100px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 100px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 100px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 100px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 100px; opacity: 1;}
to {top: 0; opacity: 0;}
}
</style>
<script>
function launchSnackBar(element) {
var checkin_partner_id = element.firstChild.nextSibling.innerText
var inputEmailId = "invitation_email" + checkin_partner_id;
var email = document.getElementById(inputEmailId).value;
var nameId = "invitation_firstname" + checkin_partner_id;
var hostId = "host_name" + checkin_partner_id;
var host = document.getElementById(hostId);
var name = document.getElementById(nameId).value;
if(email){
if(name){
host.innerHTML = name;
}
}
}
function show_invitation(element) {
var checkin_partner_id = element.firstChild.nextSibling.innerText
var divId = "invitation_group" + checkin_partner_id;
var btnId = "btn_show_invitation_email" + checkin_partner_id;
var btn2 = "btnResendInvitation"+checkin_partner_id;
var div_invitation = document.getElementById(divId);
var btn_show_invitation_email = document.getElementById(btnId);
var btn_resend = document.getElementById(btn2);
div_invitation.classList.remove("d-none");
btn_show_invitation_email.classList.add("d-none");
btn_resend.classList.add("d-none");
}
</script>
</template>
<!--thanks for complete precheckin-->
<template id="portal_my_precheckin_end" name="Precheckin End">
<t t-call="portal.portal_layout">
<wrap>
<div
class="oe_structure"
id="oe_structure_website_form_precheckin_success_1"
/>
<center>
<h5 style="margin-top:20px;">
Thank you!
Your check-in has been successful.
</h5>
<br />
<span t-if="folio">
<form
style="margin-bottom:50px"
t-att-action="folio.get_portal_url()"
method="get"
>
<button
type="submit"
class="btn btn-primary"
style="width:-webkit-fill-available"
>
<span
t-if="folio.payment_state in ['paid','nothing_to_pay','overpayment']"
class="fa fa-info"
>
Reservation Info
</span>
<span t-else="" class="fa fa-money">
Pay Now
</span>
</button>
<input
type="text"
name="access_token"
t-attf-class="d-none"
t-att-value="folio.access_token"
/>
<input
name="folio_id"
t-attf-class="d-none"
t-att-value="folio.id"
/>
</form>
</span>
</center>
<div
class="oe_structure"
id="oe_structure_website_form_precheckin_success_2"
/>
</wrap>
</t>
<style />
</template>
<!-- checkin not available -->
<template id="portal_not_checkin" name="Not Checkin">
<wrap>
<div class="oe_structure" id="oe_structure_website_form_no_precheckin_1" />
<t t-call="portal.portal_layout">
<center>
The quick registration system is not available for this reservation.<br
/>
If you have any questions, you can contact us: <br /><br
/>Phone: <span><t t-esc="folio.pms_property_id.phone" /></span> <br
/> Email: <span><t t-esc="folio.pms_property_id.email" /></span>
</center>
</t>
<div class="oe_structure" id="oe_structure_website_form_no_precheckin_2" />
</wrap>
</template>
</odoo>