1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import { useLoaderData, Form, useActionData } from "react-router-dom";
import { CartPlusFill } from "react-bootstrap-icons"
import { InfoModal } from "../../components/info_modal";
import { Modal } from "flowbite";
import { isUserAuthenticated } from "../../lib/session";
import ProductListing from "../../components/product_listing";
import MainContentLayout from "../../components/main_content_layout";
import Review from "../../components/review";
import ReviewForm from "../../components/forms/review_form";
import "../../components/stylesheets/shared.css"
import { useEffect } from "react";
export default function Product() {
let quantity_field;
let review_form_error_messages;
const response = useLoaderData();
const action_response = useActionData();
const product = response[0].data;
const reviews = response[1].data.data.map(review =>
<li key={review.id}>
<Review review={review}/>
</li>
);
useEffect(() => {
const target = document.getElementById("info-modal");
const options = {
placement: 'center-center',
backdrop: 'dynamic',
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
closable: true
};
const modal = new Modal(target, options);
document.getElementById('modal-button')?.addEventListener("click", () => {
modal.hide();
});
if(action_response == 200)
modal.show();
}, [action_response]);
let review_form;
if(isUserAuthenticated()) {
if(action_response?.status == 422)
review_form_error_messages = action_response.data.errors;
review_form = <ReviewForm product={product.data.attributes} errors={review_form_error_messages}/>;
}
else {
review_form = null;
}
if(action_response == 422) {
quantity_field = (
<div className="mx-2 w-17">
<input type="number" id="quantity-field" name="quantity" className="bg-red-50 border border-red-500 text-red-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
min='1' max={product.data.attributes.available_quantity} placeholder={1}/>
</div>
);
}
else {
quantity_field = (
<div className="mx-2 w-17">
<input type="number" id="quantity-field" name="quantity" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
min='1' max={product.data.attributes.available_quantity} placeholder={1} placeholder={1}/>
</div>
);
}
return (
<>
<MainContentLayout>
<ProductListing product={product.data}/>
<div className="my-2 flex flex-flow-reverse w-4/6">
<Form method="post" id="cart-button" className="flex h-10">
{quantity_field}
<button className="flex inline-block rounded button w-50 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
name="intent" value="add_to_cart">
<CartPlusFill size={16}/>
<span className="mx-2">Añadir al carrito</span>
</button>
</Form>
</div>
<div className="my-4">
<div className="my-2 w-3/5">
{review_form}
</div>
<ul>
{reviews}
</ul>
</div>
<InfoModal text="El producto se ha añadido a su carrito"/>
</MainContentLayout>
</>
);
}
|
