Added real data to agent section in details page, finished floating whatsapp widget

This commit is contained in:
Franklin 2023-04-14 10:38:11 -04:00
parent 1dfcec0247
commit 5b55a20afa
4 changed files with 27 additions and 9 deletions

View File

@ -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

View File

@ -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 {

View File

@ -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,
} }

View File

@ -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 {