Added real data to agent section in details page, finished floating whatsapp widget
This commit is contained in:
parent
1dfcec0247
commit
5b55a20afa
|
@ -24,3 +24,4 @@
|
||||||
- [x] Finish agents screen
|
- [x] Finish agents screen
|
||||||
- [ ] Finish Contact us screen
|
- [ ] Finish Contact us screen
|
||||||
- [ ] Link agent info with details screen, remove hardcoded pic and details
|
- [ ] Link agent info with details screen, remove hardcoded pic and details
|
||||||
|
- [ ] Whatsapp button should direct to agent's phone number wa.me link
|
|
@ -10,6 +10,7 @@
|
||||||
background-color: #25D366;
|
background-color: #25D366;
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||||
font-size: 45px;
|
font-size: 45px;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-widget-container:hover {
|
.floating-widget-container:hover {
|
||||||
|
|
|
@ -1,18 +1,23 @@
|
||||||
|
use uuid::Uuid;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
//TODO: Finish, add whatsapp link or email link?
|
//TODO: Finish, add whatsapp link or email link?
|
||||||
#[function_component(FloatingWidget)]
|
#[function_component(FloatingWidget)]
|
||||||
pub fn floating_widget(_props: &FloatingWidgetProps) -> Html {
|
pub fn floating_widget(props: &FloatingWidgetProps) -> Html {
|
||||||
|
let message = format!("Buenas, me interesa conocer mas sobre esta propiedad: %0A https://proyectosenconstruccion.com/details/{}", props.project_id);
|
||||||
|
let number = format!("1{}", props.phone_number);
|
||||||
|
let wa_me_url = format!("https://wa.me/{number}/?text={message}");
|
||||||
html! {
|
html! {
|
||||||
<div class={"floating-widget-container"}>
|
<a class={"floating-widget-container"} href={wa_me_url}>
|
||||||
<div class={"floating-widget-logo"}>
|
<div class={"floating-widget-logo"}>
|
||||||
<i class="fa-brands fa-whatsapp"></i>
|
<i class="fa-brands fa-whatsapp"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct FloatingWidgetProps {
|
pub struct FloatingWidgetProps {
|
||||||
|
pub project_id: Uuid,
|
||||||
|
pub phone_number: String,
|
||||||
}
|
}
|
|
@ -54,7 +54,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
html!{
|
html!{
|
||||||
<>
|
<>
|
||||||
<NavigationBar/>
|
<NavigationBar/>
|
||||||
<FloatingWidget/>
|
<FloatingWidget phone_number={listing.agent.credential.clone()} project_id={listing.project.id}/>
|
||||||
<div class={"page-container"}>
|
<div class={"page-container"}>
|
||||||
{
|
{
|
||||||
if *finished_loading {
|
if *finished_loading {
|
||||||
|
@ -67,11 +67,13 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
// Agent
|
// Agent
|
||||||
<div class={"details-head-agent-container"}>
|
<div class={"details-head-agent-container"}>
|
||||||
// Profile pic
|
// Profile pic
|
||||||
<img class={"details-head-agent-profile-picture"} src={"https://a0.muscache.com/im/pictures/user/b3bc8258-30a6-4e62-b971-3abaeb37159b.jpg"} alt={"agent_pfp"}/>
|
<img class={"details-head-agent-profile-picture"} src={listing.agent.profile_picture_url} alt={"agent_pfp"}/>
|
||||||
|
|
||||||
<div class={"details-head-agent-text-container"}>
|
<div class={"details-head-agent-text-container"}>
|
||||||
<div class={"details-head-agent-heading"}>{"Vendido por Luis Jose"}</div>
|
<div class={"details-head-agent-heading"}>{listing.agent.full_name}</div>
|
||||||
<div class={"details-head-agent-subheading"}>{"(809)-123-4567"}</div>
|
<div class={"details-head-agent-subheading"}>{
|
||||||
|
format_phone_number(&listing.agent.credential)
|
||||||
|
}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -221,6 +223,15 @@ pub struct DetailsPageProps {
|
||||||
pub project_id: Uuid
|
pub project_id: Uuid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn format_phone_number<'a>(phone_number: &'a String) -> String {
|
||||||
|
if phone_number.len() <= 11 && phone_number.len() >= 10 {
|
||||||
|
let (first_part, after_first) = phone_number.split_at(3);
|
||||||
|
let (second_part, last_part) = after_first.split_at(3);
|
||||||
|
format!("({})-{}-{}", first_part, second_part, last_part)
|
||||||
|
} else {
|
||||||
|
phone_number.clone()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
pub fn create_unit_selection_menu(units: &Vec<&Unit>, selected_unit_handle: UseStateHandle<usize>) -> Html {
|
pub fn create_unit_selection_menu(units: &Vec<&Unit>, selected_unit_handle: UseStateHandle<usize>) -> Html {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue